Welcome What's new in Chrome extensions Getting started API Reference Samples
Welcome What's new in Chrome extensions Getting started API Reference Samples

Rich notifications with webKit

Published on Updated on

Warning

The page you're viewing describes the Manifest V2 extension platform.

As of January 17, 2022 Chrome Web Store has stopped accepting new Manifest V2 extensions. We strongly recommend that new extensions target Manifest V3.

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.

Last updated: Improve article

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