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