| 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> |
| 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 Loading... |
| 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 — | 81 but you can create more dynamic UIs — |
| 82 such as smooth animation — | 82 such as smooth animation — |
| 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 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 |