| 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 |