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 |