1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
|
<div id="pageData-name" class="pageData">Desktop Notifications</div>
<div id="pageData-showTOC" class="pageData">true</div>
<!-- BEGIN AUTHORED CONTENT -->
<p>
Use desktop notifications to notify users that something
important has happened.
Notifications appear outside the browser window.
As the following snapshots show,
the details of how notifications look
and where they're shown depend on the platform.
</p>
<img src="images/notification-windows.png"
width="28%" style="margin:2em 0.5em 1em; border:1px solid black;"
alt="Notifications on Microsoft Windows"/>
<img src="images/notification-mac.png"
width="28%" style="margin:2em 0.5em 1em; border:1px solid black;"
alt="Notifications on Mac OS X"/>
<img src="images/notification-linux.png"
width="28%" style="margin:2em 0.5em 1em; border:1px solid black;"
alt="Notifications on Ubuntu Linux"/>
<p>
You create the notification window
using a bit of JavaScript and, optionally,
an HTML page packaged inside your extension.
</p>
<h2 id="manifest">Manifest</h2>
<p>
You can request the notification permission
in the <a href="manifest.html">extension manifest</a>,
like this:
</p>
<pre>{
"name": "My extension",
...
<b> "permissions": [
"notifications"
]</b>,
...
}</pre>
<p class="note">
<b>Note:</b> Extensions that declare
the <code>notifications</code> permission
are always allowed to create notifications.
There is no need to call
<code>webkitNotifications.checkPermission()</code>.
</p>
<h2 id="communication">Communicating with other views</h2>
<p>
You can communicate between a notification
and other views in your extension using
<a href="extension.html#method-getBackgroundPage">getBackgroundPage()</a> and
<a href="extension.html#method-getViews">getViews()</a>. For example:
</p>
<pre>
// Inside a notification...
chrome.extension.getBackgroundPage().doThing();
// From the background page...
chrome.extension.getViews({type:"notification"}).forEach(function(win) {
win.doOtherThing();
});
</pre>
<h2 id="examples"> Examples </h2>
<p>
You can find a simple example
of using notifications in the
<a href="http://src.chromium.org/viewvc/chrome/trunk/src/chrome/common/extensions/docs/examples/api/notifications/">examples/api/notifications</a>
directory.
For other examples
and for help in viewing the source code,
see <a href="samples.html">Samples</a>.
</p>
<p>
Also see html5rocks.com's
<a href="http://www.html5rocks.com/tutorials/notifications/quick/">notifications tutorial</a>.
Ignore the permission-related code;
it's unnecessary if you declare the "notifications" permission.
</p>
<h2 id="api">API</h2>
<p>
The desktop notification API for extensions
is the same one that
is available to normal web pages.
As the following code shows,
you first create either a simple text notification
or an HTML notification,
and then you show the notification.
</p>
<pre>
// Create a simple text notification:
var notification = webkitNotifications.createNotification(
'48.png', // icon url - can be relative
'Hello!', // notification title
'Lorem ipsum...' // notification body text
);
// Or create an HTML notification:
var notification = webkitNotifications.createHTMLNotification(
'notification.html' // html url - can be relative
);
// Then show the notification.
notification.show();
</pre>
<p>For complete API details,
see the <a href="http://dev.chromium.org/developers/design-documents/desktop-notifications/api-specification">Desktop notifications draft specification</a>.</p>
<!-- END AUTHORED CONTENT -->
|
