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

<p class="warning">
<b>Warning: </b>
Currently this API only works on ChromeOS and Windows.
</p>

<h2 id="usage">Usage</h2>

<p>
To use this API,
call the $ref:notifications.create method,
passing in the notification details
via the <code>options</code> parameter:
</p>

<pre>
chrome.notifications.create(id, options, creationCallback);
</pre>

<p>
The $ref:notifications.NotificationOptions must include a
$ref:notifications.TemplateType,
which defines available notification details
and how those details are displayed.
</p>

<p>
All template types
(<code>basic</code>, <code>image</code>, and <code>list</code>)
must include a notification <code>title</code> and <code>message</code>,
as well as an <code>iconUrl</code>, which is a link to a small icon that
is displayed to the left of the notification message. The <code>image</code>
template type also includes an <code>imageUrl</code>, which is a link to
an image that is previewed within the notification.
Due to a strict <a href="contentSecurityPolicy.html">Content Security Policy</a>
in packaged apps, these URLs must point to a local resource or use a
<a href="app_external.html">data URL</a>.
</p>

<p>
Here's an example of a <code>basic</code> template:
</p>

<pre>
var opt = {
  type: "basic",
  title: "Primary Title",
  message: "Primary message to display",
  iconUrl: "url_to_small_icon"
}
</pre>

<p>
The <code>list</code> template displays <code>items</code>
in a list format:
</p>

<pre>
var opt = {
  type: "list",
  title: "Primary Title",
  message: "Primary message to display",
  iconUrl: "url_to_small_icon",
  items: [{ title: "Item1", message: "This is item 1."},
          { title: "Item2", message: "This is item 2."},
          { title: "Item3", message: "This is item 3."}]
}
</pre>

<p>
Let us know if you have ideas for new templates with varying layouts
by filing a <a href="http://crbug.com/new">crbug</a>!
</p>

<h2 id="events">Listening for and responding to events</h2>

<p>
All notifications can include event listeners and event handlers
that respond to user actions.
For example,
you can write an event handler to respond to an
$ref:notifications.onButtonClicked event.
</p>

<p>Consider including event listeners and handlers within the
  <a href="app_lifecycle.html#create_event_page">event page</a>,
so that notifications can pop-up even when the app or extension isn't running.
</p>