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

Side by Side Diff: chrome/common/extensions/docs/templates/intros/experimental_notification.html

Issue 12497004: Additional fixes to new notification docs (Closed) Base URL: svn://svn.chromium.org/chrome/trunk/src
Patch Set: Created 7 years, 9 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
1 <table class="intro"> 1 <table class="intro">
2 <tr> 2 <tr>
3 <th scope="col"></th> 3 <th scope="col"></th>
4 <th scope="col"></th> 4 <th scope="col"></th>
5 </tr> 5 </tr>
6 <tr> 6 <tr>
7 <td><strong>Description:</strong></td> 7 <td><strong>Description:</strong></td>
8 <td>Use the <code>chrome.experimental.notification</code> module 8 <td>Use the <code>chrome.notifications</code> module
9 to create rich notifications using templates and 9 to create rich notifications using templates and
10 show these notifications to users in the system tray 10 show these notifications to users in the system tray
11 (see <a href="#usage">Usage</a>).</td> 11 (see <a href="#usage">Usage</a>).</td>
12 </tr> 12 </tr>
13 <tr> 13 <tr>
14 <td><strong>Availability:</strong></td> 14 <td><strong>Availability:</strong></td>
15 <td>Experimental API. You must enable the 15 <td>Google Chrome Dev Channel Only</td>
16 <a href="experimental.html#using">"Experimental Extensions API"</a>.</td>
17 </tr> 16 </tr>
18 <tr> 17 <tr>
19 <td><strong>Permissions:</strong></td> 18 <td><strong>Permissions:</strong></td>
20 <td><code>"experimental"</code></td> 19 <td><code>"notifications"</code></td>
21 </tr> 20 </tr>
22 <tr> 21 <tr>
23 <td><strong>Learn more:</strong></td> 22 <td><strong>Learn more:</strong></td>
24 <td><a href="https://developers.google.com/live/shows/83992232-1001/">Chrome Apps Office Hours: Rich Notifications</a></td> 23 <td><a href="https://developers.google.com/live/shows/83992232-1001/">Chrome Apps Office Hours: Rich Notifications</a></td>
25 </tr> 24 </tr>
26 </table> 25 </table>
27 26
28 <p class="warning"> 27 <p class="warning">
29 <b>Warning: </b> 28 <b>Warning: </b>
30 Currently this API only works on ChromeOS and Windows. 29 Currently this API only works on ChromeOS and Windows.
31 Linux and Mac should fail gracefully by displaying normal HTML5 notifications;
32 however, some information may not be displayed.
33 </p> 30 </p>
34 31
35 <h2 id="usage">Usage</h2> 32 <h2 id="usage">Usage</h2>
36 33
37 <p> 34 <p>
38 To use this API, 35 To use this API,
39 call the <a href="#method-create">create()</a> method, 36 call the $ref:experimental.notification.create method,
40 passing in the notification details 37 passing in the notification details
41 via the <code>options</code> parameter: 38 via the <code>options</code> parameter:
42 </p> 39 </p>
43 40
44 <pre> 41 <pre>
45 chrome.experimental.notification 42 chrome.experimental.notification
46 .create(id, options, creationCallback); 43 .create(id, options, creationCallback);
47 </pre> 44 </pre>
48 45
49 <p> 46 <p>
50 <a href="#type-NotificationOptions">NotificationOptions</a> must include the 47 The $ref:experimental.notification.NotificationOptions must include the
51 <a href="#type-TemplateType">TemplateType</a> 48 $ref:experimental.notification.TemplateType
52 which defines available notification details 49 which defines available notification details
53 and how those details are displayed. 50 and how those details are displayed.
54 All four available template types 51 All four available template types
55 (<code>simple</code>, <code>basic</code>, <code>image</code>, <code>list</code>) 52 (<code>simple</code>, <code>basic</code>, <code>image</code>, <code>list</code>)
56 include the notification <code>title</code> and <code>message</code>. 53 include the notification <code>title</code> and <code>message</code>.
57 </p> 54 </p>
58 55
59 <p> 56 <p>
60 They can also include urls to icons or images. 57 They can also include urls to icons or images.
61 The <code>simple</code>, <code>basic</code>, and <code>list</code> 58 The <code>simple</code>, <code>basic</code>, and <code>list</code>
62 templates link to small icons (<code>secondIconUrl</code>) displayed 59 templates link to small icons (<code>secondIconUrl</code>) displayed
63 to the left of the notification message. 60 to the left of the notification message.
64 The <code>image</code> template displays icons and images 61 The <code>image</code> template displays icons and images
65 more prominently than the text 62 more prominently than the text
66 (use <code>iconURL</code> or <code>imageURL</code>). 63 (use <code>iconURL</code> or <code>imageURL</code>).
67 Due to a strict <a href="app_csp.html">Content Security Policy</a>, 64 Due to a strict <a href="app_csp.html">Content Security Policy</a>,
68 all icon and image URLs in packaged apps should point to a local resource. 65 all of these URLs in packaged apps should point to a local resource
66 or use a <a href="http://developer.chrome.com/apps/app_external.html">data URL</ a>.
69 </p> 67 </p>
70 68
71 <p> 69 <p>
72 The <code>basic</code> template looks similar to <code>simple</code>, 70 The <code>basic</code> template looks similar to <code>simple</code>,
73 and can also include an <code>expandedMessage</code>. 71 and can also include an <code>expandedMessage</code>.
74 Here's an example: 72 Here's an example:
75 </p> 73 </p>
76 74
77 <pre> 75 <pre>
78 var opt = { 76 var opt = {
(...skipping 28 matching lines...) Expand all
107 </p> 105 </p>
108 106
109 <h2 id="events">Listening for and responding to events</h2> 107 <h2 id="events">Listening for and responding to events</h2>
110 108
111 <p> 109 <p>
112 With the exception of the <code>simple</code> template, 110 With the exception of the <code>simple</code> template,
113 all notifications can include event listeners and event handlers 111 all notifications can include event listeners and event handlers
114 which respond to user actions. 112 which respond to user actions.
115 For example, 113 For example,
116 you can write an event handler to respond to an 114 you can write an event handler to respond to an
117 <a href="#event-onButtonClicked">onButtonClicked</a> event. 115 $ref:experimental.notification.onButtonClicked event.
118 </p> 116 </p>
119 117
120 <p>Consider including event listeners and handlers within the 118 <p>Consider including event listeners and handlers within the
121 <a href="app_lifecycle.html#create_event_page">event page</a>, 119 <a href="app_lifecycle.html#create_event_page">event page</a>,
122 so that notifications can pop-up even when the app or extension isn't running. 120 so that notifications can pop-up even when the app or extension isn't running.
123 </p> 121 </p>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698