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" /> |
(...skipping 34 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
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: |
47 </p> | 47 </p> |
48 | 48 |
49 <pre data-filename="manifest.json"> | 49 <pre data-filename="manifest.json"> |
50 { | 50 { |
51 "name": "My extension", | 51 "name": "My extension", |
52 ... | 52 ... |
53 <b>"browser_action": { | 53 <b>"browser_action": { |
54 ... | 54 ... |
55 "default_icon": "images/icon19.png" <em>// optional</em> | 55 "default_icon": "images/icon38.png" <em>// optional</em> |
56 <em>// equivalent to "default_icon": { "19": "images/icon19.png" }</em> | 56 <em>// equivalent to "default_icon": { "38": "images/icon38.png" }</em> |
57 }</b>, | 57 }</b>, |
58 ... | 58 ... |
59 } | 59 } |
60 </pre> | 60 </pre> |
61 | 61 |
62 <h2 id="ui">Parts of the UI</h2> | 62 <h2 id="ui">Parts of the UI</h2> |
63 | 63 |
64 <p> | 64 <p> |
65 A browser action can have an <a href="#icon">icon</a>, | 65 A browser action can have an <a href="#icon">icon</a>, |
66 a <a href="#tooltip">tooltip</a>, | 66 a <a href="#tooltip">tooltip</a>, |
(...skipping 88 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
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">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 38x38-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">Samples</a>. | 188 <a href="samples">Samples</a>. |
189 </p> | 189 </p> |
OLD | NEW |