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

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