src/chrome/common/extensions/docs/templates/intros/notifications.html

   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>