OLD | NEW |
---|---|
1 <p>Use browser actions to put icons | 1 <p>Use browser actions to put icons |
2 in the main Google Chrome toolbar, | 2 in the main Google Chrome toolbar, |
3 to the right of the address bar. | 3 to the right of the address bar. |
4 In addition to its <a href="#icon">icon</a>, | 4 In addition to its <a href="#icon">icon</a>, |
5 a browser action can also have | 5 a browser action can also have |
6 a <a href="#tooltip">tooltip</a>, | 6 a <a href="#tooltip">tooltip</a>, |
7 a <a href="#badge">badge</a>, | 7 a <a href="#badge">badge</a>, |
8 and a <a href="#popups">popup</a>. | 8 and a <a href="#popups">popup</a>. |
9 </p> | 9 </p> |
10 | 10 |
(...skipping 26 matching lines...) Expand all Loading... | |
37 <p> | 37 <p> |
38 Register your browser action in the | 38 Register your browser action in the |
39 <a href="manifest.html">extension manifest</a> | 39 <a href="manifest.html">extension manifest</a> |
40 like this: | 40 like this: |
41 </p> | 41 </p> |
42 | 42 |
43 <pre>{ | 43 <pre>{ |
44 "name": "My extension", | 44 "name": "My extension", |
45 ... | 45 ... |
46 <b>"browser_action": { | 46 <b>"browser_action": { |
47 "default_icon": "images/icon19.png", <em>// optional</em> | 47 "default_icon": { <em>// optional</em> |
48 "19": "images/icon19.png", <em>// optional</em> | |
49 "38": "images/icon38.png" <em>// optional</em> | |
50 }, | |
48 "default_title": "Google Mail", <em>// optional; shown in tooltip</em> | 51 "default_title": "Google Mail", <em>// optional; shown in tooltip</em> |
49 "default_popup": "popup.html" <em>// optional</em> | 52 "default_popup": "popup.html" <em>// optional</em> |
50 }</b>, | 53 }</b>, |
51 ... | 54 ... |
52 }</pre> | 55 }</pre> |
53 | 56 |
57 <p> | |
58 If you don't care about icon appearance when screens's device-independent | |
Jeffrey Yasskin
2012/09/17 20:18:39
"don't care" is a little strong. The tech writers
mkearney1
2012/09/17 21:17:45
I like Jeffrey's suggestion. But I think I would s
tbarzic
2012/09/17 22:06:10
Done.
| |
59 pixel (dip) size is different from its physical pixel size, you can register | |
60 the default icon like this: | |
61 </p> | |
62 | |
63 <pre>{ | |
64 "name": "My extension", | |
65 ... | |
66 <b>"browser_action": { | |
67 ... | |
68 "default_icon": "images/icon19.png" <em>// optional</em> | |
69 <em>// equal to "default_icon": { "19": "images/icon19.png" }</em> | |
Jeffrey Yasskin
2012/09/17 20:18:39
s/equal/equivalent/
tbarzic
2012/09/17 22:06:10
Done.
| |
70 }</b>, | |
71 ... | |
72 }</pre> | |
73 | |
54 <h2 id="ui">Parts of the UI</h2> | 74 <h2 id="ui">Parts of the UI</h2> |
55 | 75 |
56 <p> | 76 <p> |
57 A browser action can have an <a href="#icon">icon</a>, | 77 A browser action can have an <a href="#icon">icon</a>, |
58 a <a href="#tooltip">tooltip</a>, | 78 a <a href="#tooltip">tooltip</a>, |
59 a <a href="#badge">badge</a>, | 79 a <a href="#badge">badge</a>, |
60 and a <a href="#popups">popup</a>. | 80 and a <a href="#popups">popup</a>. |
61 </p> | 81 </p> |
62 | 82 |
63 <h3 id="icon">Icon</h3> | 83 <h3 id="icon">Icon</h3> |
64 | 84 |
65 <p>Browser action icons can be up to 19 pixels wide and high. | 85 <p>Browser action icons can be up to 19 dips wide and high. |
Jeffrey Yasskin
2012/09/17 20:18:39
Explain the acronym the first time you use it in a
tbarzic
2012/09/17 22:06:10
Done.
tbarzic
2012/09/17 22:06:10
Done.
| |
66 Larger icons are resized to fit, but for best results, | 86 Larger icons are resized to fit, but for best results, |
67 use a 19-pixel square icon.</p> | 87 use a 19-dip size square icon.</p> |
Jeffrey Yasskin
2012/09/17 20:18:39
No need for "size" since it wasn't there when "pix
tbarzic
2012/09/17 22:06:10
Done.
| |
68 | 88 |
69 <p>You can set the icon in two ways: | 89 <p>You can set the icon in two ways: |
70 using a static image or using the | 90 using a static image or using the |
71 HTML5 <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the -canvas-element.html">canvas element</a>. | 91 HTML5 <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the -canvas-element.html">canvas element</a>. |
72 Using static images is easier for simple applications, | 92 Using static images is easier for simple applications, |
73 but you can create more dynamic UIs — | 93 but you can create more dynamic UIs — |
74 such as smooth animation — | 94 such as smooth animation — |
75 using the canvas element. | 95 using the canvas element. |
76 </p> | 96 </p> |
77 | 97 |
78 <p>Static images can be in any format WebKit can display, | 98 <p>Static images can be in any format WebKit can display, |
79 including BMP, GIF, ICO, JPEG, or PNG. | 99 including BMP, GIF, ICO, JPEG, or PNG. |
80 </p> | 100 </p> |
81 | 101 |
82 <p>To set the icon, | 102 <p>To set the icon, |
83 use the <b>default_icon</b> field of <b>browser_action</b> | 103 use the <b>default_icon</b> field of <b>browser_action</b> |
84 in the <a href="#manifest">manifest</a>, | 104 in the <a href="#manifest">manifest</a>, |
85 or call the <a href="#method-setIcon">setIcon()</a> method. | 105 or call the <a href="#method-setIcon">setIcon()</a> method. |
106 </p> | |
86 | 107 |
108 <p>To properly display icon when screen pixel density (ratio | |
109 <code>size_in_dip / size_in_pixel</code>) is different than 1, | |
Jeffrey Yasskin
2012/09/17 20:18:39
This should be "<code>size_in_pixels / size_in_dip
tbarzic
2012/09/17 22:06:10
Done.
| |
110 the icon can be defined as set of images with different sizes. | |
111 The actual image to display will be selected from the set to | |
112 best fit the pixel size of 19 dip icon. | |
113 At the moment, the icon set can contain images with pixel sizes 19 and 38. | |
114 </p> | |
87 | 115 |
88 <h3 id="tooltip">Tooltip</h3> | 116 <h3 id="tooltip">Tooltip</h3> |
89 | 117 |
90 <p> | 118 <p> |
91 To set the tooltip, | 119 To set the tooltip, |
92 use the <b>default_title</b> field of <b>browser_action</b> | 120 use the <b>default_title</b> field of <b>browser_action</b> |
93 in the <a href="#manifest">manifest</a>, | 121 in the <a href="#manifest">manifest</a>, |
94 or call the <a href="#method-setTitle">setTitle()</a> method. | 122 or call the <a href="#method-setTitle">setTitle()</a> method. |
95 You can specify locale-specific strings for the <b>default_title</b> field; | 123 You can specify locale-specific strings for the <b>default_title</b> field; |
96 see <a href="i18n.html">Internationalization</a> for details. | 124 see <a href="i18n.html">Internationalization</a> for details. |
(...skipping 65 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
162 </ul> | 190 </ul> |
163 | 191 |
164 <h2 id="examples"> Examples </h2> | 192 <h2 id="examples"> Examples </h2> |
165 | 193 |
166 <p> | 194 <p> |
167 You can find simple examples of using browser actions in the | 195 You can find simple examples of using browser actions in the |
168 <a href="http://src.chromium.org/viewvc/chrome/trunk/src/chrome/common/extension s/docs/examples/api/browserAction/">examples/api/browserAction</a> | 196 <a href="http://src.chromium.org/viewvc/chrome/trunk/src/chrome/common/extension s/docs/examples/api/browserAction/">examples/api/browserAction</a> |
169 directory. | 197 directory. |
170 For other examples and for help in viewing the source code, see | 198 For other examples and for help in viewing the source code, see |
171 <a href="samples.html">Samples</a>. | 199 <a href="samples.html">Samples</a>. |
172 </p> | 200 </p> |
OLD | NEW |