| 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" /> |
| (...skipping 34 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 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: |
| 47 </p> | 47 </p> |
| 48 | 48 |
| 49 <pre data-filename="manifest.json"> | 49 <pre data-filename="manifest.json"> |
| 50 { | 50 { |
| 51 "name": "My extension", | 51 "name": "My extension", |
| 52 ... | 52 ... |
| 53 <b>"browser_action": { | 53 <b>"browser_action": { |
| 54 ... | 54 ... |
| 55 "default_icon": "images/icon19.png" <em>// optional</em> | 55 "default_icon": "images/icon38.png" <em>// optional</em> |
| 56 <em>// equivalent to "default_icon": { "19": "images/icon19.png" }</em> | 56 <em>// equivalent to "default_icon": { "38": "images/icon38.png" }</em> |
| 57 }</b>, | 57 }</b>, |
| 58 ... | 58 ... |
| 59 } | 59 } |
| 60 </pre> | 60 </pre> |
| 61 | 61 |
| 62 <h2 id="ui">Parts of the UI</h2> | 62 <h2 id="ui">Parts of the UI</h2> |
| 63 | 63 |
| 64 <p> | 64 <p> |
| 65 A browser action can have an <a href="#icon">icon</a>, | 65 A browser action can have an <a href="#icon">icon</a>, |
| 66 a <a href="#tooltip">tooltip</a>, | 66 a <a href="#tooltip">tooltip</a>, |
| (...skipping 88 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 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">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 38x38-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">Samples</a>. | 188 <a href="samples">Samples</a>. |
| 189 </p> | 189 </p> |
| OLD | NEW |