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

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

Issue 219213007: Remove .html extension from links (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Created 6 years, 8 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
OLDNEW
1 <p> 1 <p>
2 In the following figure, 2 In the following figure,
3 the multicolored square 3 the multicolored square
4 to the right of the address bar 4 to the right of the address bar
5 is the icon for a browser action. 5 is the icon for a browser action.
6 A popup is below the icon. 6 A popup is below the icon.
7 </p> 7 </p>
8 8
9 <img src="{{static}}/images/browser-action.png" 9 <img src="{{static}}/images/browser-action.png"
10 width="363" height="226" /> 10 width="363" height="226" />
11 11
12 <p> 12 <p>
13 If you want to create an icon that isn't always visible, 13 If you want to create an icon that isn't always visible,
14 use a <a href="pageAction.html">page action</a> 14 use a <a href="pageAction">page action</a>
15 instead of a browser action. 15 instead of a browser action.
16 </p> 16 </p>
17 17
18 <h2 id="manifest">Manifest</h2> 18 <h2 id="manifest">Manifest</h2>
19 19
20 <p> 20 <p>
21 Register your browser action in the 21 Register your browser action in the
22 <a href="manifest.html">extension manifest</a> 22 <a href="manifest">extension manifest</a>
23 like this: 23 like this:
24 </p> 24 </p>
25 25
26 <pre data-filename="manifest.json"> 26 <pre data-filename="manifest.json">
27 { 27 {
28 "name": "My extension", 28 "name": "My extension",
29 ... 29 ...
30 <b>"browser_action": { 30 <b>"browser_action": {
31 "default_icon": { <em>// optional</em> 31 "default_icon": { <em>// optional</em>
32 "19": "images/icon19.png", <em>// optional</em> 32 "19": "images/icon19.png", <em>// optional</em>
33 "38": "images/icon38.png" <em>// optional</em> 33 "38": "images/icon38.png" <em>// optional</em>
34 }, 34 },
35 "default_title": "Google Mail", <em>// optional; shown in tooltip</em> 35 "default_title": "Google Mail", <em>// optional; shown in tooltip</em>
36 "default_popup": "popup.html" <em>// optional</em> 36 "default_popup": "popup" <em>// optional</em>
37 }</b>, 37 }</b>,
38 ... 38 ...
39 } 39 }
40 </pre> 40 </pre>
41 41
42 <p> 42 <p>
43 If you only provide one of the 19px or 38px icon size, the extension system will 43 If you only provide one of the 19px or 38px icon size, the extension system will
44 scale the icon you provide to the pixel density of the user's display, which 44 scale the icon you provide to the pixel density of the user's display, which
45 can lose detail or make it look fuzzy. The old syntax for registering the 45 can lose detail or make it look fuzzy. The old syntax for registering the
46 default icon is still supported: 46 default icon is still supported:
(...skipping 22 matching lines...) Expand all
69 </p> 69 </p>
70 70
71 <h3 id="icon">Icon</h3> 71 <h3 id="icon">Icon</h3>
72 72
73 <p>Browser action icons can be up to 19 dips (device-independent pixels) 73 <p>Browser action icons can be up to 19 dips (device-independent pixels)
74 wide and high. Larger icons are resized to fit, but for best results, 74 wide and high. Larger icons are resized to fit, but for best results,
75 use a 19-dip square icon.</p> 75 use a 19-dip square icon.</p>
76 76
77 <p>You can set the icon in two ways: 77 <p>You can set the icon in two ways:
78 using a static image or using the 78 using a static image or using the
79 HTML5 <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the -canvas-element.html">canvas element</a>. 79 HTML5 <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the -canvas-element">canvas element</a>.
80 Using static images is easier for simple applications, 80 Using static images is easier for simple applications,
81 but you can create more dynamic UIs &mdash; 81 but you can create more dynamic UIs &mdash;
82 such as smooth animation &mdash; 82 such as smooth animation &mdash;
83 using the canvas element. 83 using the canvas element.
84 </p> 84 </p>
85 85
86 <p>Static images can be in any format WebKit can display, 86 <p>Static images can be in any format WebKit can display,
87 including BMP, GIF, ICO, JPEG, or PNG. 87 including BMP, GIF, ICO, JPEG, or PNG.
88 For unpacked extensions, images must be in the PNG format. 88 For unpacked extensions, images must be in the PNG format.
89 </p> 89 </p>
(...skipping 13 matching lines...) Expand all
103 </p> 103 </p>
104 104
105 <h3 id="tooltip">Tooltip</h3> 105 <h3 id="tooltip">Tooltip</h3>
106 106
107 <p> 107 <p>
108 To set the tooltip, 108 To set the tooltip,
109 use the <b>default_title</b> field of <b>browser_action</b> 109 use the <b>default_title</b> field of <b>browser_action</b>
110 in the <a href="#manifest">manifest</a>, 110 in the <a href="#manifest">manifest</a>,
111 or call the $(ref:browserAction.setTitle) method. 111 or call the $(ref:browserAction.setTitle) method.
112 You can specify locale-specific strings for the <b>default_title</b> field; 112 You can specify locale-specific strings for the <b>default_title</b> field;
113 see <a href="i18n.html">Internationalization</a> for details. 113 see <a href="i18n">Internationalization</a> for details.
114 </p> 114 </p>
115 115
116 <h3 id="badge">Badge</h3> 116 <h3 id="badge">Badge</h3>
117 117
118 <p>Browser actions can optionally display a <em>badge</em> &mdash; 118 <p>Browser actions can optionally display a <em>badge</em> &mdash;
119 a bit of text that is layered over the icon. 119 a bit of text that is layered over the icon.
120 Badges make it easy to update the browser action 120 Badges make it easy to update the browser action
121 to display a small amount of information 121 to display a small amount of information
122 about the state of the extension.</p> 122 about the state of the extension.</p>
123 123
(...skipping 29 matching lines...) Expand all
153 <h2 id="tips">Tips</h2> 153 <h2 id="tips">Tips</h2>
154 154
155 <p>For the best visual impact, 155 <p>For the best visual impact,
156 follow these guidelines:</p> 156 follow these guidelines:</p>
157 157
158 <ul> 158 <ul>
159 <li><b>Do</b> use browser actions for features 159 <li><b>Do</b> use browser actions for features
160 that make sense on most pages. 160 that make sense on most pages.
161 <li><b>Don't</b> use browser actions for features 161 <li><b>Don't</b> use browser actions for features
162 that make sense for only a few pages. 162 that make sense for only a few pages.
163 Use <a href="pageAction.html">page actions</a> instead. 163 Use <a href="pageAction">page actions</a> instead.
164 <li><b>Do</b> use big, colorful icons that make the most of 164 <li><b>Do</b> use big, colorful icons that make the most of
165 the 19x19-pixel space. 165 the 19x19-pixel space.
166 Browser action icons should seem a little bigger 166 Browser action icons should seem a little bigger
167 and heavier than page action icons. 167 and heavier than page action icons.
168 <li><b>Don't</b> attempt to mimic 168 <li><b>Don't</b> attempt to mimic
169 Google Chrome's monochrome menu icon. 169 Google Chrome's monochrome menu icon.
170 That doesn't work well with themes, and anyway, 170 That doesn't work well with themes, and anyway,
171 extensions should stand out a little. 171 extensions should stand out a little.
172 <li><b>Do</b> use alpha transparency 172 <li><b>Do</b> use alpha transparency
173 to add soft edges to your icon. 173 to add soft edges to your icon.
174 Because many people use themes, 174 Because many people use themes,
175 your icon should look nice 175 your icon should look nice
176 on a variety of background colors. 176 on a variety of background colors.
177 <li><b>Don't</b> constantly animate your icon. 177 <li><b>Don't</b> constantly animate your icon.
178 That's just annoying. 178 That's just annoying.
179 </ul> 179 </ul>
180 180
181 <h2 id="examples"> Examples </h2> 181 <h2 id="examples"> Examples </h2>
182 182
183 <p> 183 <p>
184 You can find simple examples of using browser actions in the 184 You can find simple examples of using browser actions in the
185 <a href="http://src.chromium.org/viewvc/chrome/trunk/src/chrome/common/extension s/docs/examples/api/browserAction/">examples/api/browserAction</a> 185 <a href="http://src.chromium.org/viewvc/chrome/trunk/src/chrome/common/extension s/docs/examples/api/browserAction/">examples/api/browserAction</a>
186 directory. 186 directory.
187 For other examples and for help in viewing the source code, see 187 For other examples and for help in viewing the source code, see
188 <a href="samples.html">Samples</a>. 188 <a href="samples">Samples</a>.
189 </p> 189 </p>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698