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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
|
<div id="pageData-title" class="pageData">Page Actions</div>
<!-- BEGIN AUTHORED CONTENT -->
<p>
Use page actions to put icons inside the address bar.
Page actions represent actions
that can be taken on the current page,
but that aren't applicable to all pages.
Some examples:
</p>
<ul>
<li> Subscribe to this page's RSS feed </li>
<li> Make a slideshow out of this page's photos </li>
</ul>
<p>
The RSS icon in the following screenshot
represents a page action
that lets you subscribe to
the RSS feed for the current page.
</p>
<img src="images/page-action.png"
width="361" height="79" />
<p>
If you want your icon to always be visible,
use a <a href="browserAction.html">browser action</a> instead.
</p>
<h2 id="manifest">Manifest</h2>
<p>
Register your page action in the
<a href="manifest.html">extension manifest</a>
like this:
</p>
<pre>"page_action": {
"default_title": "Do action", <em>// optional; shown in tooltip</em>
"default_icon": "icons/foo.png" <em>// optional</em>
}</pre>
<p><b>Note:</b> Even if you don't include
any of the values,
you must include an empty <b>page_action</b> entry
in your manifest so that the system
reserves a slot for your page action
in the address bar.</p>
<p>
Set "default_icon" if at all possible.
Users see the default icon when they install your extension,
which helps them know what to look for when your page action
is active for a given page.</p>
<h2 id="ui">Parts of the UI</h2>
<p>
Page actions have an icon and optional tooltip,
just like browser actions do.
In addition, page actions can appear and disappear.
For information about the common UI parts,
read about the
<a href="browserAction.html#ui">browser action UI</a>.
</p>
<p>
You make a page action appear and disappear using the
<a href="#method-show">show()</a> and
<a href="#method-hide">hide()</a> methods, respectively.
By default, a page action is hidden.
When you show it, you specify the tab
in which the icon should appear.
The icon remains visible
until the tab is closed
or starts displaying a different URL
(because the user clicks a link, for example).
</p>
<div class="comment">
[PENDING:
We should discuss how tabs and page actions are related.
All methods take a tab ID argument.
How do you get that tab ID?
What's the usual way of arranging the code that monitors pages?
Point to examples.]
</div>
<h2 id="tips">Tips</h2>
<p>For the best visual impact,
follow these guidelines:</p>
<ul>
<li><b>Do</b> use page actions
for features that make sense
for only a few pages.
<li><b>Don't</b> use page actions
for features that make sense
for most pages.
Use <a href="browserAction.html">browser actions</a> instead.
<li><b>Do</b> use icons
that are slightly lighter weight
than <a href="browserAction.html#icon">browser action icons</a>.
Most icons that Chrome displays
in the location bar
are smaller than 19 pixels.
If the edge pixels are used,
they are usually only used
for a faint shadow.
<li><b>Don't</b> constantly animate your icon.
That's just annoying.
</ul>
<!-- END AUTHORED CONTENT -->
|
