OLD | NEW |
1 <!-- BEGIN AUTHORED CONTENT --> | 1 |
| 2 |
| 3 |
2 <p> | 4 <p> |
3 Use page actions to put icons inside the address bar. | 5 Use page actions to put icons inside the address bar. |
4 Page actions represent actions | 6 Page actions represent actions |
5 that can be taken on the current page, | 7 that can be taken on the current page, |
6 but that aren't applicable to all pages. | 8 but that aren't applicable to all pages. |
7 Some examples: | 9 Some examples: |
8 </p> | 10 </p> |
9 <ul> | 11 <ul> |
10 <li> Subscribe to this page's RSS feed </li> | 12 <li> Subscribe to this page's RSS feed </li> |
11 <li> Make a slideshow out of this page's photos </li> | 13 <li> Make a slideshow out of this page's photos </li> |
12 </ul> | 14 </ul> |
| 15 |
13 <p> | 16 <p> |
14 The RSS icon in the following screenshot | 17 The RSS icon in the following screenshot |
15 represents a page action | 18 represents a page action |
16 that lets you subscribe to | 19 that lets you subscribe to |
17 the RSS feed for the current page. | 20 the RSS feed for the current page. |
18 </p> | 21 </p> |
| 22 |
19 <img src="{{static}}/images/page-action.png" | 23 <img src="{{static}}/images/page-action.png" |
20 width="361" height="79" /> | 24 width="361" height="79" /> |
| 25 |
21 <p> | 26 <p> |
22 If you want the extension's icon to always be visible, | 27 If you want the extension's icon to always be visible, |
23 use a <a href="browserAction.html">browser action</a> instead. | 28 use a <a href="browserAction.html">browser action</a> instead. |
24 </p> | 29 </p> |
| 30 |
25 <p class="caution"> | 31 <p class="caution"> |
26 <strong>Note:</strong> | 32 <strong>Note:</strong> |
27 Packaged apps cannot use page actions. | 33 Packaged apps cannot use page actions. |
28 </p> | 34 </p> |
| 35 |
| 36 |
29 <h2 id="manifest">Manifest</h2> | 37 <h2 id="manifest">Manifest</h2> |
| 38 |
30 <p> | 39 <p> |
31 Register your page action in the | 40 Register your page action in the |
32 <a href="manifest.html">extension manifest</a> | 41 <a href="manifest.html">extension manifest</a> |
33 like this: | 42 like this: |
34 </p> | 43 </p> |
| 44 |
35 <pre>{ | 45 <pre>{ |
36 "name": "My extension", | 46 "name": "My extension", |
37 ... | 47 ... |
38 <b>"page_action": { | 48 <b>"page_action": { |
39 "default_icon": "icons/foo.png", <em>// optional</em> | 49 "default_icon": "icons/foo.png", <em>// optional</em> |
40 "default_title": "Do action", <em>// optional; shown in tooltip</em> | 50 "default_title": "Do action", <em>// optional; shown in tooltip</em> |
41 "default_popup": "popup.html" <em>// optional</em> | 51 "default_popup": "popup.html" <em>// optional</em> |
42 }</b>, | 52 }</b>, |
43 ... | 53 ... |
44 }</pre> | 54 }</pre> |
| 55 |
45 <h2 id="ui">Parts of the UI</h2> | 56 <h2 id="ui">Parts of the UI</h2> |
| 57 |
46 <p> | 58 <p> |
47 Like browser actions, | 59 Like browser actions, |
48 page actions can have an icon, | 60 page actions can have an icon, |
49 a tooltip, and popup; | 61 a tooltip, and popup; |
50 they can't have badges, however. | 62 they can't have badges, however. |
51 In addition, page actions can appear and disappear. | 63 In addition, page actions can appear and disappear. |
52 You can find information about icons, tooltips, and popups | 64 You can find information about icons, tooltips, and popups |
53 by reading about the | 65 by reading about the |
54 <a href="browserAction.html#ui">browser action UI</a>. | 66 <a href="browserAction.html#ui">browser action UI</a>. |
55 </p> | 67 </p> |
| 68 |
56 <p> | 69 <p> |
57 You make a page action appear and disappear using the | 70 You make a page action appear and disappear using the |
58 <a href="#method-show">show()</a> and | 71 <a href="#method-show">show()</a> and |
59 <a href="#method-hide">hide()</a> methods, respectively. | 72 <a href="#method-hide">hide()</a> methods, respectively. |
60 By default, a page action is hidden. | 73 By default, a page action is hidden. |
61 When you show it, you specify the tab | 74 When you show it, you specify the tab |
62 in which the icon should appear. | 75 in which the icon should appear. |
63 The icon remains visible | 76 The icon remains visible |
64 until the tab is closed | 77 until the tab is closed |
65 or starts displaying a different URL | 78 or starts displaying a different URL |
66 (because the user clicks a link, for example). | 79 (because the user clicks a link, for example). |
67 </p> | 80 </p> |
68 <!-- [PENDING: We should discuss how tabs and page actions are related. All met
hods 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.] --> | 81 |
| 82 |
| 83 |
| 84 |
69 <h2 id="tips">Tips</h2> | 85 <h2 id="tips">Tips</h2> |
| 86 |
70 <p>For the best visual impact, | 87 <p>For the best visual impact, |
71 follow these guidelines:</p> | 88 follow these guidelines:</p> |
| 89 |
72 <ul> | 90 <ul> |
73 <li><b>Do</b> use page actions | 91 <li><b>Do</b> use page actions |
74 for features that make sense | 92 for features that make sense |
75 for only a few pages. | 93 for only a few pages. |
76 <li><b>Don't</b> use page actions | 94 <li><b>Don't</b> use page actions |
77 for features that make sense | 95 for features that make sense |
78 for most pages. | 96 for most pages. |
79 Use <a href="browserAction.html">browser actions</a> instead. | 97 Use <a href="browserAction.html">browser actions</a> instead. |
80 <li><b>Don't</b> constantly animate your icon. | 98 <li><b>Don't</b> constantly animate your icon. |
81 That's just annoying. | 99 That's just annoying. |
82 </ul> | 100 </ul> |
| 101 |
| 102 |
83 <h2 id="examples"> Examples </h2> | 103 <h2 id="examples"> Examples </h2> |
| 104 |
84 <p> | 105 <p> |
85 You can find simple examples of using page actions in the | 106 You can find simple examples of using page actions in the |
86 <a href="http://src.chromium.org/viewvc/chrome/trunk/src/chrome/common/extension
s/docs/examples/api/pageAction/">examples/api/pageAction</a> | 107 <a href="http://src.chromium.org/viewvc/chrome/trunk/src/chrome/common/extension
s/docs/examples/api/pageAction/">examples/api/pageAction</a> |
87 directory. | 108 directory. |
88 For other examples and for help in viewing the source code, see | 109 For other examples and for help in viewing the source code, see |
89 <a href="samples.html">Samples</a>. | 110 <a href="samples.html">Samples</a>. |
90 </p> | 111 </p> |
91 <!-- END AUTHORED CONTENT --> | 112 |
| 113 |
OLD | NEW |