Home | History | Annotate | Download | only in intros 
      1 <h2 id="usage">Usage</h2>
      2 
      3 <p>
      4 To use this API,
      5 call the $(ref:notifications.create) method,
      6 passing in the notification details
      7 via the <code>options</code> parameter:
      8 </p>
      9 
     10 <pre>
     11 chrome.notifications.create(id, options, creationCallback);
     12 </pre>
     13 
     14 <p>
     15 The $(ref:notifications.NotificationOptions) must include a
     16 $(ref:notifications.TemplateType),
     17 which defines available notification details
     18 and how those details are displayed.
     19 </p>
     20 
     21 <p>
     22 All template types
     23 (<code>basic</code>, <code>image</code>, and <code>list</code>)
     24 must include a notification <code>title</code> and <code>message</code>,
     25 as well as an <code>iconUrl</code>, which is a link to a small icon that
     26 is displayed to the left of the notification message. The <code>image</code>
     27 template type also includes an <code>imageUrl</code>, which is a link to
     28 an image that is previewed within the notification.
     29 Due to a strict <a href="contentSecurityPolicy">Content Security Policy</a>
     30 in Chrome Apps, these URLs must point to a local resource or use a
     31 <a href="app_external">data URL</a>.
     32 </p>
     33 
     34 <p>
     35 Here's an example of a <code>basic</code> template:
     36 </p>
     37 
     38 <pre>
     39 var opt = {
     40   type: "basic",
     41   title: "Primary Title",
     42   message: "Primary message to display",
     43   iconUrl: "url_to_small_icon"
     44 }
     45 </pre>
     46 
     47 <p>
     48 The <code>list</code> template displays <code>items</code>
     49 in a list format:
     50 </p>
     51 
     52 <pre>
     53 var opt = {
     54   type: "list",
     55   title: "Primary Title",
     56   message: "Primary message to display",
     57   iconUrl: "url_to_small_icon",
     58   items: [{ title: "Item1", message: "This is item 1."},
     59           { title: "Item2", message: "This is item 2."},
     60           { title: "Item3", message: "This is item 3."}]
     61 }
     62 </pre>
     63 
     64 <p>
     65 Let us know if you have ideas for new templates with varying layouts
     66 by filing a <a href="http://crbug.com/new">crbug</a>!
     67 </p>
     68 
     69 <h2 id="events">Listening for and responding to events</h2>
     70 
     71 <p>
     72 All notifications can include event listeners and event handlers
     73 that respond to user actions.
     74 For example,
     75 you can write an event handler to respond to an
     76 $(ref:notifications.onButtonClicked) event.
     77 </p>
     78 
     79 <p>Consider including event listeners and handlers within the
     80   <a href="app_lifecycle#create_event_page">event page</a>,
     81 so that notifications can pop-up even when the app or extension isn't running.
     82 </p>
     83