OLD | NEW |
1 <div id="pageData-name" class="pageData">Desktop Notifications</div> | 1 <h1>Desktop Notifications</h1> |
2 <div id="pageData-showTOC" class="pageData">true</div> | |
3 | 2 |
4 <!-- BEGIN AUTHORED CONTENT --> | 3 |
| 4 |
5 <p> | 5 <p> |
6 Use desktop notifications to notify users that something | 6 Use desktop notifications to notify users that something |
7 important has happened. | 7 important has happened. |
8 Notifications appear outside the browser window. | 8 Notifications appear outside the browser window. |
9 As the following snapshots show, | 9 As the following snapshots show, |
10 the details of how notifications look | 10 the details of how notifications look |
11 and where they're shown depend on the platform. | 11 and where they're shown depend on the platform. |
12 </p> | 12 </p> |
13 | 13 |
14 <img src="../images/notification-windows.png" | 14 <img src="{{static}}/images/notification-windows.png" |
15 width="28%" style="margin:2em 0.5em 1em; border:1px solid black;" | 15 width="28%" style="margin:2em 0.5em 1em; border:1px solid black;" |
16 alt="Notifications on Microsoft Windows"/> | 16 alt="Notifications on Microsoft Windows"/> |
17 <img src="../images/notification-mac.png" | 17 <img src="{{static}}/images/notification-mac.png" |
18 width="28%" style="margin:2em 0.5em 1em; border:1px solid black;" | 18 width="28%" style="margin:2em 0.5em 1em; border:1px solid black;" |
19 alt="Notifications on Mac OS X"/> | 19 alt="Notifications on Mac OS X"/> |
20 <img src="../images/notification-linux.png" | 20 <img src="{{static}}/images/notification-linux.png" |
21 width="28%" style="margin:2em 0.5em 1em; border:1px solid black;" | 21 width="28%" style="margin:2em 0.5em 1em; border:1px solid black;" |
22 alt="Notifications on Ubuntu Linux"/> | 22 alt="Notifications on Ubuntu Linux"/> |
23 | 23 |
24 <p> | 24 <p> |
25 You create the notification window | 25 You create the notification window |
26 using a bit of JavaScript and, optionally, | 26 using a bit of JavaScript and, optionally, |
27 an HTML page packaged inside your extension. | 27 an HTML page packaged inside your extension. |
28 </p> | 28 </p> |
29 | 29 |
30 | 30 |
(...skipping 84 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
115 // Or create an HTML notification: | 115 // Or create an HTML notification: |
116 var notification = webkitNotifications.createHTMLNotification( | 116 var notification = webkitNotifications.createHTMLNotification( |
117 'notification.html' // html url - can be relative | 117 'notification.html' // html url - can be relative |
118 ); | 118 ); |
119 | 119 |
120 // Then show the notification. | 120 // Then show the notification. |
121 notification.show(); | 121 notification.show(); |
122 </pre> | 122 </pre> |
123 | 123 |
124 <p>For complete API details, | 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> | 125 see the <a href="http://dev.chromium.org/developers/design-documents/desktop-not
ifications/api-specification">Desktop notifications draft specification</a>.</p> |
126 | |
127 <!-- END AUTHORED CONTENT --> | |
OLD | NEW |