Rich notifications with webKit

Use rich desktop notifications to notify users that something important has happened. Notifications appear outside the browser window. As the following snapshots show, the details of how notifications look and where they're shown depend on the platform.

Notifications on Microsoft Windows

Notifications on Mac OS X

Notifications on Ubuntu Linux

You create the notification window using a bit of JavaScript and, optionally, an HTML page packaged inside your extension.

Example

First, declare the notifications permission in your manifest:

{
  "name": "My extension",
  "manifest_version": 2,
  ...
  "permissions": [
    "notifications"
  ],
  ...
  // Note: Because of bug 134315, you must declare any images you
  // want to use with createNotification() as a web accessible resource.
  "web_accessible_resources": [
    "48.png"
  ],
}

Then, use webkitNotifications object to create notifications:

// Note: There's no need to call webkitNotifications.checkPermission().
// Extensions that declare the notifications permission are always
// allowed create notifications.

// Create a simple text notification:
var notification = webkitNotifications.createNotification(
  '48.png',  // icon url - can be relative
  'Hello!',  // notification title
  'Lorem ipsum...'  // notification body text
);

// Or create an HTML notification:
var notification = webkitNotifications.createHTMLNotification(
  'notification.html'  // html url - can be relative
);

// Then show the notification.
notification.show();

API reference

See the Desktop Notifications Draft Specification.

Communicating with other views

You can communicate between a notification and other views in your extension using extension.getBackgroundPage and extension.getViews. For example:

chrome.extension.getBackgroundPage().doThing();

chrome.extension.getViews({type:"notification"}).forEach(function(win) {
  win.doOtherThing();
});

More examples

You can find a simple example of using notifications in the examples/api/notifications directory. For other examples and for help in viewing the source code, see Samples.

Also see html5rocks.com's notifications tutorial. Ignore the permission-related code; it's unnecessary if you declare the "notifications" permission.