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 |