| OLD | NEW |
| 1 <!-- BEGIN AUTHORED CONTENT --> | |
| 2 <p>Use browser actions to put icons | 1 <p>Use browser actions to put icons |
| 3 in the main Google Chrome toolbar, | 2 in the main Google Chrome toolbar, |
| 4 to the right of the address bar. | 3 to the right of the address bar. |
| 5 In addition to its <a href="#icon">icon</a>, | 4 In addition to its <a href="#icon">icon</a>, |
| 6 a browser action can also have | 5 a browser action can also have |
| 7 a <a href="#tooltip">tooltip</a>, | 6 a <a href="#tooltip">tooltip</a>, |
| 8 a <a href="#badge">badge</a>, | 7 a <a href="#badge">badge</a>, |
| 9 and a <a href="#popups">popup</a>. | 8 and a <a href="#popups">popup</a>. |
| 10 </p> | 9 </p> |
| 11 <p> | 10 <p> |
| 12 In the following figure, | 11 In the following figure, |
| 13 the multicolored square | 12 the multicolored square |
| 14 to the right of the address bar | 13 to the right of the address bar |
| 15 is the icon for a browser action. | 14 is the icon for a browser action. |
| 16 A popup is below the icon. | 15 A popup is below the icon. |
| 17 </p> | 16 </p> |
| 18 <img src="{{static}}/images/browser-action.png" | 17 <img src="{{static}}/images/browser-action.png" |
| 19 width="363" height="226" /> | 18 width="363" height="226" /> |
| 20 <p> | 19 <p> |
| 21 If you want to create an icon that isn't always visible, | 20 If you want to create an icon that isn't always visible, |
| 22 use a <a href="pageAction.html">page action</a> | 21 use a <a href="pageAction.html">page action</a> |
| 23 instead of a browser action. | 22 instead of a browser action. |
| 24 </p> | 23 </p> |
| 25 <p class="caution"> | 24 <p class="caution"> |
| 26 <strong>Note:</strong> | 25 <strong>Note:</strong> |
| 27 Packaged apps cannot use browser actions. | 26 Packaged apps cannot use browser actions. |
| 28 </p> | 27 </p> |
| 29 <!-- [PENDING: We should show tooltips and badges, as well.] --> | |
| 30 <h2 id="manifest">Manifest</h2> | 28 <h2 id="manifest">Manifest</h2> |
| 31 <p> | 29 <p> |
| 32 Register your browser action in the | 30 Register your browser action in the |
| 33 <a href="manifest.html">extension manifest</a> | 31 <a href="manifest.html">extension manifest</a> |
| 34 like this: | 32 like this: |
| 35 </p> | 33 </p> |
| 36 <pre>{ | 34 <pre>{ |
| 37 "name": "My extension", | 35 "name": "My extension", |
| 38 ... | 36 ... |
| 39 <b>"browser_action": { | 37 <b>"browser_action": { |
| (...skipping 45 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 85 to display a small amount of information | 83 to display a small amount of information |
| 86 about the state of the extension.</p> | 84 about the state of the extension.</p> |
| 87 <p>Because the badge has limited space, | 85 <p>Because the badge has limited space, |
| 88 it should have 4 characters or less. | 86 it should have 4 characters or less. |
| 89 </p> | 87 </p> |
| 90 <p> | 88 <p> |
| 91 Set the text and color of the badge using | 89 Set the text and color of the badge using |
| 92 <a href="#method-setBadgeText">setBadgeText()</a> and | 90 <a href="#method-setBadgeText">setBadgeText()</a> and |
| 93 <a href="#method-setBadgeBackgroundColor">setBadgeBackgroundColor()</a>, | 91 <a href="#method-setBadgeBackgroundColor">setBadgeBackgroundColor()</a>, |
| 94 respectively. | 92 respectively. |
| 95 <!-- [PENDING: if you have a color but no text, will anything display?] --> | |
| 96 </p> | 93 </p> |
| 97 <h3 id="popups">Popup</h3> | 94 <h3 id="popups">Popup</h3> |
| 98 <p>If a browser action has a popup, | 95 <p>If a browser action has a popup, |
| 99 the popup appears when the user clicks the icon. | 96 the popup appears when the user clicks the icon. |
| 100 The popup can contain any HTML contents that you like, | 97 The popup can contain any HTML contents that you like, |
| 101 and it's automatically sized to fit its contents. | 98 and it's automatically sized to fit its contents. |
| 102 </p> | 99 </p> |
| 103 <p> | 100 <p> |
| 104 To add a popup to your browser action, | 101 To add a popup to your browser action, |
| 105 create an HTML file with the popup's contents. | 102 create an HTML file with the popup's contents. |
| (...skipping 26 matching lines...) Expand all Loading... |
| 132 <li><b>Don't</b> constantly animate your icon. | 129 <li><b>Don't</b> constantly animate your icon. |
| 133 That's just annoying. | 130 That's just annoying. |
| 134 </ul> | 131 </ul> |
| 135 <h2 id="examples"> Examples </h2> | 132 <h2 id="examples"> Examples </h2> |
| 136 <p> | 133 <p> |
| 137 You can find simple examples of using browser actions in the | 134 You can find simple examples of using browser actions in the |
| 138 <a href="http://src.chromium.org/viewvc/chrome/trunk/src/chrome/common/extension
s/docs/examples/api/browserAction/">examples/api/browserAction</a> | 135 <a href="http://src.chromium.org/viewvc/chrome/trunk/src/chrome/common/extension
s/docs/examples/api/browserAction/">examples/api/browserAction</a> |
| 139 directory. | 136 directory. |
| 140 For other examples and for help in viewing the source code, see | 137 For other examples and for help in viewing the source code, see |
| 141 <a href="samples.html">Samples</a>. | 138 <a href="samples.html">Samples</a>. |
| 142 </p> | 139 </p> |
| 143 <!-- END AUTHORED CONTENT --> | |
| OLD | NEW |