欢迎 What's new in Chrome extensions Get help with Chrome extensions API reference Samples
欢迎 What's new in Chrome extensions Get help with Chrome extensions API reference Samples

Rich notifications with webKit

Published on Updated on

Warning

The Chrome Web Store no longer accepts Manifest V2 extensions. Please use Manifest V3 when building new extensions. You will find a section on upgrading in the navigation tree at the left, including the Manifest V2 support timeline.

Warning

Warning: webKitNotifications.createHTMLNotification() in the web notifications API has been deprecated. The new web notifications API only allows text. Chrome notifications API will be promoted to stable soon and web notifications will be updated to use the new rich notifications format.

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.

Updated on Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.