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="manifest">Manifest</h2> |
| 32 |
| 33 <p> |
| 34 You can request the notification permission |
| 35 in the <a href="manifest.html">extension manifest</a>, |
| 36 like this: |
| 37 </p> |
| 38 |
| 39 <pre>{ |
| 40 "name": "My extension", |
| 41 ... |
| 42 <b> "permissions": [ |
| 43 "notifications" |
| 44 ]</b>, |
| 45 ... |
| 46 }</pre> |
| 47 |
| 48 <p class="note"> |
| 49 <b>Note:</b> Extensions that declare |
| 50 the <code>notifications</code> permission |
| 51 are always allowed to create notifications. |
| 52 There is no need to call |
| 53 <code>webkitNotifications.checkPermission()</code>. |
| 54 </p> |
| 55 |
| 56 <h2 id="communication">Communicating with other views</h2> |
| 57 |
| 58 <p> |
| 59 You can communicate between a notification |
| 60 and other views in your extension using |
| 61 <a href="extension.html#method-getBackgroundPage">getBackgroundPage()</a> and |
| 62 <a href="extension.html#method-getViews">getViews()</a>. For example: |
| 63 </p> |
| 64 |
| 65 <pre> |
| 66 // Inside a notification... |
| 67 chrome.extension.getBackgroundPage().doThing(); |
| 68 |
| 69 // From the background page... |
| 70 chrome.extension.getViews({type:"notification"}).forEach(function(win) { |
| 71 win.doOtherThing(); |
| 72 }); |
| 73 </pre> |
| 74 |
| 75 |
| 76 <h2 id="examples"> Examples </h2> |
| 77 |
| 78 <p> |
| 79 You can find a simple example |
| 80 of using notifications in the |
| 81 <a href="http://src.chromium.org/viewvc/chrome/trunk/src/chrome/common/extension
s/docs/examples/api/notifications/">examples/api/notifications</a> |
| 82 directory. |
| 83 For other examples |
| 84 and for help in viewing the source code, |
| 85 see <a href="samples.html">Samples</a>. |
| 86 </p> |
| 87 |
| 88 <p> |
| 89 Also see html5rocks.com's |
| 90 <a href="http://www.html5rocks.com/tutorials/notifications/quick/">notifications
tutorial</a>. |
| 91 Ignore the permission-related code; |
| 92 it's unnecessary if you declare the "notifications" permission. |
| 93 </p> |
| 94 |
| 95 <h2 id="api">API</h2> |
| 96 |
| 97 <p> |
| 98 The desktop notification API for extensions |
| 99 is the same one that |
| 100 is available to normal web pages. |
| 101 As the following code shows, |
| 102 you first create either a simple text notification |
| 103 or an HTML notification, |
| 104 and then you show the notification. |
| 105 </p> |
| 106 |
| 107 <pre> |
| 108 // Create a simple text notification: |
| 109 var notification = webkitNotifications.createNotification( |
| 110 '48.png', // icon url - can be relative |
| 111 'Hello!', // notification title |
| 112 'Lorem ipsum...' // notification body text |
| 113 ); |
| 114 |
| 115 // Or create an HTML notification: |
| 116 var notification = webkitNotifications.createHTMLNotification( |
| 117 'notification.html' // html url - can be relative |
| 118 ); |
| 119 |
| 120 // Then show the notification. |
| 121 notification.show(); |
| 122 </pre> |
| 123 |
| 124 <p>For complete API details, |
| 125 see the <a href="http://dev.chromium.org/developers/design-documents/desktop-not
ifications/api-specification">Desktop notifications draft specification</a>.</p> |
OLD | NEW |