Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(220)

Side by Side Diff: chrome/common/extensions/docs/server2/templates/articles/notifications.html

Issue 10832042: Extensions Docs Server: Doc conversion script (Closed) Base URL: svn://svn.chromium.org/chrome/trunk/src
Patch Set: everything but svn stuff Created 8 years, 4 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch | Annotate | Revision Log
OLDNEW
(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>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698