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 |