1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
|
<div id="pageData-title" class="pageData">Browser Actions</div>
<!-- BEGIN AUTHORED CONTENT -->
<p>Browser actions are buttons
that are displayed in the main Chrome toolbar
to the right of the omnibox.</p>
<img src="images/browser-action.png"
width="363" height="226" />
<h2 id="icons">Icons</h2>
<p>Browser action icons can be up to 19px square.
Larger icons will be resized to fit, but for best results,
using a 19px icon is recommended.</p>
<p>Icons can be set two ways:
using a static image or using the
HTML5 <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html">canvas element</a>.
Using static images is easier for simple applications,
but you can do more dynamic UIs
using the canvas element.
<p>Static images can be in any format WebKit can display.
These include: png, bmp, ico, jpg, gif.</p>
<h2 id="badges">Badges</h2>
<p>Browser actions can optionally display a badge,
which is a bit of text that is layered over the icon.
Badges make it easy to update the browser action
to display a small amount of information
about the state of the extension.</p>
<p>The badge APIs allow any length of text,
but limiting badges to a max of four characters
is recommended.</p>
<h2 id="popups">Popups</h2>
<p>Popups allow browser actions to show additional UI
when the user activates them.
Popups contents are implemented using HTML
and the popup is automatically sized
to the content size.</p>
<h2>Style Guide</h2>
<p>For the best visual impact,
we recommend observing
the following guidelines:</p>
<ul>
<li><b>Do</b> use browser actions for features
that make sense on most pages.
<li><b>Don't</b> use browser actions for features
that only make sense for a few pages.
Use <a href="pageAction.html">page actions</a> instead.
<li><b>Do</b> use big, colorful icons that fully utilize
the 19px square space.
Browser action icons should seem a little bigger
and heavier than page action icons.
<li><b>Don't</b> attempt to mimic
Chrome's monochrome "wrench" and "page" icons.
This won't work well with themes, and anyway,
extensions should stand out a little.
<li><b>Do</b> use alpha transparency
to add soft edges to your icon.
Remember: many users theme Chrome,
so your icon should look nice
on a variety of background colors.
<li><b>Don't</b> constantly animate your icon.
That's just annoying.
</ul>
<h2 id="manifest">Manifest</h2>
<p>Developers declare their browser action
using the following syntax:</p>
<pre>"browser_action": {
"default_title": "Google Mail", // Optional. Shown in tooltip.
"default_icon": "images/icon19.png", // Optional.
"popup": "popup.html" // Optional
}</pre>
<p><b>Note:</b> Even if you don't include
any of the values, you must include an empty
browser_action entry in your manifest
so that the system knows to reserve space
for your browser action in the toolbar.</p>
<!-- END AUTHORED CONTENT -->
|
