Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License, and code samples are licensed under the BSD License.
©2013 Google
| Description: | Use the chrome.notifications module
to create rich notifications using templates and
show these notifications to users in the system tray
(see Usage). |
| Availability: | Google Chrome Dev Channel Only |
| Permissions: | "notifications" |
| Learn more: | Chrome Apps Office Hours: Rich Notifications |
Warning: Currently this API only works on ChromeOS and Windows.
To use this API,
call the create method,
passing in the notification details
via the options parameter:
chrome.notifications.create(id, options, creationCallback);
The NotificationOptions must include the
TemplateType
which defines available notification details
and how those details are displayed.
All four available template types
(simple, basic, image, list)
include the notification title and message.
They can also include urls to icons or images.
The simple, basic, and list
templates link to small icons (secondIconUrl) displayed
to the left of the notification message.
The image template displays icons and images
more prominently than the text
(use iconUrl or imageUrl).
Due to a strict Content Security Policy,
all of these URLs in packaged apps should point to a local resource
or use a data URL.
The basic template looks similar to simple,
and can also include an expandedMessage.
Here's an example:
var opt = {
type: "basic",
title: "Primary Title",
message: "Primary message to display",
expandedMessage: "Additional message",
secondIconUrl: "url_to_small_icon"
}
The list template will display items
in a list format:
var opt = {
type: "list",
title: "Primary Title",
message: "Primary message to display",
secondIconUrl: "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."}]
}
Let us know if you have ideas for new templates with varying layouts by filing a crbug!
With the exception of the simple template,
all notifications can include event listeners and event handlers
which respond to user actions.
For example,
you can write an event handler to respond to an
onButtonClicked event.
Consider including event listeners and handlers within the event page, so that notifications can pop-up even when the app or extension isn't running.
Creates and displays a notification having the contents in |options|, identified by the id |notificationId|. If |notificationId| is empty, |create| generates an id. If |notificationId| matches an existing notification, |create| first clears that notification before proceeding with the create operation. |callback| returns the notification id (either supplied or generated) that represents the created notification.
The callback parameter should specify a function that looks like this:
function(string notificationId) {...};
Updates an existing notification having the id |notificationId| and the options |options|. |callback| indicates whether a matching notification existed.
The callback parameter should specify a function that looks like this:
function(boolean wasUpdated) {...};
Given a |notificationId| returned by the |create| method, clears the corresponding notification. |callback| indicates whether a matching notification existed.
The callback parameter should specify a function that looks like this:
function(boolean wasCleared) {...};