| OLD | NEW |
|---|
| (Empty) |
| 1 <h1>Desktop Notifications</h1> | |
| 2 | |
| 3 | |
| 4 | |
| 5 <p> | |
| 6 Use desktop notifications to notify users that something | |
| 7 important has happened. | |
| 8 Notifications appear outside the browser window. | |
| 9 As the following snapshots show, | |
| 10 the details of how notifications look | |
| 11 and where they're shown depend on the platform. | |
| 12 </p> | |
| 13 | |
| 14 <img src="{{static}}/images/notification-windows.png" | |
| 15 width="28%" style="margin:2em 0.5em 1em; border:1px solid black;" | |
| 16 alt="Notifications on Microsoft Windows"/> | |
| 17 <img src="{{static}}/images/notification-mac.png" | |
| 18 width="28%" style="margin:2em 0.5em 1em; border:1px solid black;" | |
| 19 alt="Notifications on Mac OS X"/> | |
| 20 <img src="{{static}}/images/notification-linux.png" | |
| 21 width="28%" style="margin:2em 0.5em 1em; border:1px solid black;" | |
| 22 alt="Notifications on Ubuntu Linux"/> | |
| 23 | |
| 24 <p> | |
| 25 You create the notification window | |
| 26 using a bit of JavaScript and, optionally, | |
| 27 an HTML page packaged inside your extension. | |
| 28 </p> | |
| 29 | |
| 30 | |
| 31 <h2 id="example">Example</h2> | |
| 32 | |
| 33 <p>First, declare the <code>notifications</code> permission in your manifest:</p
> | |
| 34 <pre> | |
| 35 { | |
| 36 "name": "My extension", | |
| 37 "manifest_version": 2, | |
| 38 ... | |
| 39 <b> "permissions": [ | |
| 40 "notifications" | |
| 41 ]</b>, | |
| 42 ... | |
| 43 // <strong>Note:</strong> Because of <a href="http://code.google.com/p/chromiu
m/issues/detail?id=134315">bug 134315</a>, you must declare any images you | |
| 44 // want to use with createNotification() as a web accessible resource. | |
| 45 <b> "web_accessible_resources": [ | |
| 46 "48.png" | |
| 47 ]</b>, | |
| 48 } | |
| 49 </pre> | |
| 50 | |
| 51 <p>Then, use <code>webkitNotifications</code> object to create notifications:</p
> | |
| 52 | |
| 53 <pre> | |
| 54 // <strong>Note:</strong> There's no need to call webkitNotifications.checkPermi
ssion(). | |
| 55 // Extensions that declare the <em>notifications</em> permission are always | |
| 56 // allowed create notifications. | |
| 57 | |
| 58 // Create a simple text notification: | |
| 59 var notification = webkitNotifications.createNotification( | |
| 60 '48.png', // icon url - can be relative | |
| 61 'Hello!', // notification title | |
| 62 'Lorem ipsum...' // notification body text | |
| 63 ); | |
| 64 | |
| 65 // Or create an HTML notification: | |
| 66 var notification = webkitNotifications.createHTMLNotification( | |
| 67 'notification.html' // html url - can be relative | |
| 68 ); | |
| 69 | |
| 70 // Then show the notification. | |
| 71 notification.show(); | |
| 72 </pre> | |
| 73 | |
| 74 <h2 id="reference">API Reference</h2> | |
| 75 | |
| 76 <p>See the <a href="http://dev.chromium.org/developers/design-documents/desktop-
notifications/api-specification">Desktop Notifications Draft Specification</a>.<
/p> | |
| 77 | |
| 78 | |
| 79 <h2 id="communication">Communicating with Other Views</h2> | |
| 80 | |
| 81 <p> | |
| 82 You can communicate between a notification | |
| 83 and other views in your extension using | |
| 84 $ref:extension.getBackgroundPage and | |
| 85 $ref:extension.getViews. For example: | |
| 86 </p> | |
| 87 | |
| 88 <pre> | |
| 89 // Inside a notification... | |
| 90 chrome.extension.getBackgroundPage().doThing(); | |
| 91 | |
| 92 // From the background page... | |
| 93 chrome.extension.getViews({type:"notification"}).forEach(function(win) { | |
| 94 win.doOtherThing(); | |
| 95 }); | |
| 96 </pre> | |
| 97 | |
| 98 | |
| 99 <h2 id="examples">More Examples</h2> | |
| 100 | |
| 101 <p> | |
| 102 You can find a simple example | |
| 103 of using notifications in the | |
| 104 <a href="http://src.chromium.org/viewvc/chrome/trunk/src/chrome/common/extension
s/docs/examples/api/notifications/">examples/api/notifications</a> | |
| 105 directory. | |
| 106 For other examples | |
| 107 and for help in viewing the source code, | |
| 108 see <a href="samples.html">Samples</a>. | |
| 109 </p> | |
| 110 | |
| 111 <p> | |
| 112 Also see html5rocks.com's | |
| 113 <a href="http://www.html5rocks.com/tutorials/notifications/quick/">notifications
tutorial</a>. | |
| 114 Ignore the permission-related code; | |
| 115 it's unnecessary if you declare the "notifications" permission. | |
| 116 </p> | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 12497004:
Additional fixes to new notification docs (Closed)
Base URL: svn://svn.chromium.org/chrome/trunk/src