OLD | NEW |
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> |
(...skipping 70 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
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> — | 118 <p>Browser actions can optionally display a <em>badge</em> — |
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 Loading... |
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> |
OLD | NEW |