chrome.notifications

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.

Usage

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 a TemplateType, which defines available notification details and how those details are displayed.

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

Here's an example of a basic template:

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

The list template displays items in a list format:

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."}]
}

Let us know if you have ideas for new templates with varying layouts by filing a crbug!

Listening for and responding to events

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 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.

chrome.notifications reference

Types

TemplateType

NotificationItem

Properties of NotificationItem

title ( string )
Title of one item of a list notification.
message ( string )
Additional details about this item.

NotificationButton

Properties of NotificationButton

title ( string )
iconUrl ( optional string )

NotificationOptions

Properties of NotificationOptions

type ( TemplateType )
Which type of notification to display.
iconUrl ( string )
Sender's avatar, app icon, or a thumbnail for image notifications.
title ( string )
Title of the notification (e.g. sender name for email).
message ( string )
Main notification content.
priority ( optional integer )
Priority ranges from -2 to 2. -2 is lowest priority. 2 is highest. Zero is default.
eventTime ( optional double )
A timestamp associated with the notification, in milliseconds past the epoch (e.g. Date.now() + n).
buttons ( optional array of NotificationButton )
Text and icons of notification action buttons.
imageUrl ( optional string )
Image thumbnail for image-type notifications.
items ( optional array of NotificationItem )
Items for multi-item notifications.

Methods

create

chrome.notifications.create(string notificationId, NotificationOptions options, function callback)

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.

Parameters

notificationId ( string )
options ( NotificationOptions )
callback ( function )

Callback

The callback parameter should specify a function that looks like this:

function(string notificationId) {...};
notificationId ( string )

update

chrome.notifications.update(string notificationId, NotificationOptions options, function callback)

Updates an existing notification having the id |notificationId| and the options |options|. |callback| indicates whether a matching notification existed.

Parameters

notificationId ( string )
options ( NotificationOptions )
callback ( function )

Callback

The callback parameter should specify a function that looks like this:

function(boolean wasUpdated) {...};
wasUpdated ( boolean )

clear

chrome.notifications.clear(string notificationId, function callback)

Given a |notificationId| returned by the |create| method, clears the corresponding notification. |callback| indicates whether a matching notification existed.

Parameters

notificationId ( string )
callback ( function )

Callback

The callback parameter should specify a function that looks like this:

function(boolean wasCleared) {...};
wasCleared ( boolean )

Events

onClosed

chrome.notifications.onClosed.addListener(function(string notificationId, boolean byUser) {...});

The notification closed, either by the system or by user action.

Listener Parameters

notificationId ( string )
byUser ( boolean )

onClicked

chrome.notifications.onClicked.addListener(function(string notificationId) {...});

The user clicked in a non-button area of the notification.

Listener Parameters

notificationId ( string )

onButtonClicked

chrome.notifications.onButtonClicked.addListener(function(string notificationId, integer buttonIndex) {...});

The user pressed a button in the notification.

Listener Parameters

notificationId ( string )
buttonIndex ( integer )