Rich notifications with webKit
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: 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.
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.