| OLD | NEW |
| 1 <div id="pageData-name" class="pageData">Browser Actions</div> | |
| 2 | |
| 3 <!-- BEGIN AUTHORED CONTENT --> | |
| 4 <p>Use browser actions to put icons | 1 <p>Use browser actions to put icons |
| 5 in the main Google Chrome toolbar, | 2 in the main Google Chrome toolbar, |
| 6 to the right of the address bar. | 3 to the right of the address bar. |
| 7 In addition to its <a href="#icon">icon</a>, | 4 In addition to its <a href="#icon">icon</a>, |
| 8 a browser action can also have | 5 a browser action can also have |
| 9 a <a href="#tooltip">tooltip</a>, | 6 a <a href="#tooltip">tooltip</a>, |
| 10 a <a href="#badge">badge</a>, | 7 a <a href="#badge">badge</a>, |
| 11 and a <a href="#popups">popup</a>. | 8 and a <a href="#popups">popup</a>. |
| 12 </p> | 9 </p> |
| 13 | 10 |
| 14 <p> | 11 <p> |
| 15 In the following figure, | 12 In the following figure, |
| 16 the multicolored square | 13 the multicolored square |
| 17 to the right of the address bar | 14 to the right of the address bar |
| 18 is the icon for a browser action. | 15 is the icon for a browser action. |
| 19 A popup is below the icon. | 16 A popup is below the icon. |
| 20 </p> | 17 </p> |
| 21 | 18 |
| 22 <img src="../images/browser-action.png" | 19 <img src="{{static}}/images/browser-action.png" |
| 23 width="363" height="226" /> | 20 width="363" height="226" /> |
| 24 | 21 |
| 25 <p> | 22 <p> |
| 26 If you want to create an icon that isn't always visible, | 23 If you want to create an icon that isn't always visible, |
| 27 use a <a href="pageAction.html">page action</a> | 24 use a <a href="pageAction.html">page action</a> |
| 28 instead of a browser action. | 25 instead of a browser action. |
| 29 </p> | 26 </p> |
| 30 | 27 |
| 31 <p class="caution"> | 28 <p class="caution"> |
| 32 <strong>Note:</strong> | 29 <strong>Note:</strong> |
| 33 Packaged apps cannot use browser actions. | 30 Packaged apps cannot use browser actions. |
| 34 </p> | 31 </p> |
| 35 | 32 |
| 36 <!-- [PENDING: We should show tooltips and badges, as well.] --> | 33 |
| 37 | 34 |
| 38 <h2 id="manifest">Manifest</h2> | 35 <h2 id="manifest">Manifest</h2> |
| 39 | 36 |
| 40 <p> | 37 <p> |
| 41 Register your browser action in the | 38 Register your browser action in the |
| 42 <a href="manifest.html">extension manifest</a> | 39 <a href="manifest.html">extension manifest</a> |
| 43 like this: | 40 like this: |
| 44 </p> | 41 </p> |
| 45 | 42 |
| 46 <pre>{ | 43 <pre>{ |
| (...skipping 62 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 109 | 106 |
| 110 <p>Because the badge has limited space, | 107 <p>Because the badge has limited space, |
| 111 it should have 4 characters or less. | 108 it should have 4 characters or less. |
| 112 </p> | 109 </p> |
| 113 | 110 |
| 114 <p> | 111 <p> |
| 115 Set the text and color of the badge using | 112 Set the text and color of the badge using |
| 116 <a href="#method-setBadgeText">setBadgeText()</a> and | 113 <a href="#method-setBadgeText">setBadgeText()</a> and |
| 117 <a href="#method-setBadgeBackgroundColor">setBadgeBackgroundColor()</a>, | 114 <a href="#method-setBadgeBackgroundColor">setBadgeBackgroundColor()</a>, |
| 118 respectively. | 115 respectively. |
| 119 <!-- [PENDING: if you have a color but no text, will anything display?] --> | 116 |
| 120 </p> | 117 </p> |
| 121 | 118 |
| 122 | 119 |
| 123 <h3 id="popups">Popup</h3> | 120 <h3 id="popups">Popup</h3> |
| 124 | 121 |
| 125 <p>If a browser action has a popup, | 122 <p>If a browser action has a popup, |
| 126 the popup appears when the user clicks the icon. | 123 the popup appears when the user clicks the icon. |
| 127 The popup can contain any HTML contents that you like, | 124 The popup can contain any HTML contents that you like, |
| 128 and it's automatically sized to fit its contents. | 125 and it's automatically sized to fit its contents. |
| 129 </p> | 126 </p> |
| (...skipping 35 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 165 </ul> | 162 </ul> |
| 166 | 163 |
| 167 <h2 id="examples"> Examples </h2> | 164 <h2 id="examples"> Examples </h2> |
| 168 | 165 |
| 169 <p> | 166 <p> |
| 170 You can find simple examples of using browser actions in the | 167 You can find simple examples of using browser actions in the |
| 171 <a href="http://src.chromium.org/viewvc/chrome/trunk/src/chrome/common/extension
s/docs/examples/api/browserAction/">examples/api/browserAction</a> | 168 <a href="http://src.chromium.org/viewvc/chrome/trunk/src/chrome/common/extension
s/docs/examples/api/browserAction/">examples/api/browserAction</a> |
| 172 directory. | 169 directory. |
| 173 For other examples and for help in viewing the source code, see | 170 For other examples and for help in viewing the source code, see |
| 174 <a href="samples.html">Samples</a>. | 171 <a href="samples.html">Samples</a>. |
| 175 </p> | 172 </p> |
| 176 | |
| 177 <!-- END AUTHORED CONTENT --> | |
| OLD | NEW |