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

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

Issue 12315133: Very simple set of docs for experimental notification API (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
(Empty)
1 <table class="intro">
2 <tr>
3 <th scope="col"></th>
4 <th scope="col"></th>
5 </tr>
6 <tr>
7 <td><strong>Description:</strong></td>
8 <td>Use the <code>chrome.experimental.notification</code> module
9 to create rich notifications using templates and
10 show these notifications to users in the system tray
11 (see <a href="#usage">Usage</a>).</td>
12 </tr>
13 <tr>
14 <td><strong>Availability:</strong></td>
15 <td>Experimental API. You must enable the
16 <a href="experimental.html#using">"Experimental Extensions API"</a>.</td>
miket_OOO 2013/03/04 22:06:56 See above. Current dev- canary- trunk only.
mkearney1 2013/03/06 00:03:40 Done.
17 </tr>
18 <tr>
19 <td><strong>Permissions:</strong></td>
20 <td><code>"experimental"</code></td>
miket_OOO 2013/03/04 22:06:56 notifications
mkearney1 2013/03/06 00:03:40 Done.
21 </tr>
22 <tr>
23 <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>
25 </tr>
26 </table>
27
28 <p class="warning">
29 <b>Warning: </b>
30 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.
miket_OOO 2013/03/04 22:06:56 This might not currently be the case on Linux/Mac,
mkearney1 2013/03/06 00:03:40 Cool. Removed sentence for now and starred the iss
33 </p>
34
35 <h2 id="usage">Usage</h2>
36
37 <p>
38 To use this API,
39 call the <a href="#method-create">create()</a> method,
40 passing in the notification details
41 via the <code>options</code> parameter:
42 </p>
43
44 <pre>
45 chrome.experimental.notification
46 .create(id, options, creationCallback);
47 </pre>
48
49 <p>
50 <a href="#type-NotificationOptions">NotificationOptions</a> must include the
51 <a href="#type-TemplateType">TemplateType</a>
52 which defines available notification details
53 and how those details are displayed.
54 All four available template types
55 (<code>simple</code>, <code>basic</code>, <code>image</code>, <code>list</code>)
56 include the notification <code>title</code> and <code>message</code>.
57 </p>
58
59 <p>
60 They can also include urls to icons or images.
61 The <code>simple</code>, <code>basic</code>, and <code>list</code>
62 templates link to small icons (<code>secondIconUrl</code>) displayed
63 to the left of the notification message.
64 The <code>image</code> template displays icons and images
65 more prominently than the text
66 (use <code>iconURL</code> or <code>imageURL</code>).
67 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.
miket_OOO 2013/03/04 22:06:56 ... or use a data URL (see http://developer.chrome
mkearney1 2013/03/06 00:03:40 I changed the 'all icon and image URLs' to 'all of
69 </p>
70
71 <p>
72 The <code>basic</code> template looks similar to <code>simple</code>,
73 and can also include an <code>expandedMessage</code>.
74 Here's an example:
75 </p>
76
77 <pre>
78 var opt = {
79 templateType: "basic",
80 title: "Primary Title",
81 message: "Primary message to display",
82 expandedMessage: "Additional message",
83 secondIconURL: "url_to_small_icon"
84 }
85 </pre>
86
87 <p>
88 The <code>list</code> template will display <code>items</code>
89 in a list format:
90 </p>
91
92 <pre>
93 var opt = {
94 templateType: "list",
95 title: "Primary Title",
96 message: "Primary message to display",
97 secondIconURL: "url_to_small_icon",
98 items: [{ title: "Item1", message: "This is item 1."},
99 { title: "Item2", message: "This is item 2."},
100 { title: "Item3", message: "This is item 3."}]
101 }
102 </pre>
103
104 <p>
105 Let us know if you have ideas for new templates with varying layouts
106 by filing a <a href="crbug.com/new">crbug</a>!
107 </p>
108
109 <h2 id="events">Listening for and responding to events</h2>
110
111 <p>
112 With the exception of the <code>simple</code> template,
113 all notifications can include event listeners and event handlers
114 which respond to user actions.
115 For example,
116 you can write an event handler to respond to an
117 <a href="#event-onButtonClicked">onButtonClicked</a> event.
118 </p>
119
120 <p>Consider including event listeners and handlers within the
121 <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.
123 </p>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698