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

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