| OLD | NEW |
| 1 <p> | 1 <p> |
| 2 Some examples: | 2 Some examples: |
| 3 </p> | 3 </p> |
| 4 <ul> | 4 <ul> |
| 5 <li> Subscribe to this page's RSS feed </li> | 5 <li> Subscribe to this page's RSS feed </li> |
| 6 <li> Make a slideshow out of this page's photos </li> | 6 <li> Make a slideshow out of this page's photos </li> |
| 7 </ul> | 7 </ul> |
| 8 | 8 |
| 9 <p> | 9 <p> |
| 10 The RSS icon in the following screenshot | 10 The RSS icon in the following screenshot |
| 11 represents a page action | 11 represents a page action |
| 12 that lets you subscribe to | 12 that lets you subscribe to |
| 13 the RSS feed for the current page. | 13 the RSS feed for the current page. |
| 14 </p> | 14 </p> |
| 15 | 15 |
| 16 <img src="{{static}}/images/page-action.png" | 16 <img src="{{static}}/images/page-action.png" |
| 17 width="361" height="79" /> | 17 width="361" height="79" /> |
| 18 | 18 |
| 19 <p> | 19 <p> |
| 20 If you want the extension's icon to always be visible, | 20 If you want the extension's icon to always be visible, |
| 21 use a <a href="browserAction.html">browser action</a> instead. | 21 use a <a href="browserAction">browser action</a> instead. |
| 22 </p> | 22 </p> |
| 23 | 23 |
| 24 <h2 id="manifest">Manifest</h2> | 24 <h2 id="manifest">Manifest</h2> |
| 25 | 25 |
| 26 <p> | 26 <p> |
| 27 Register your page action in the | 27 Register your page action in the |
| 28 <a href="manifest.html">extension manifest</a> | 28 <a href="manifest">extension manifest</a> |
| 29 like this: | 29 like this: |
| 30 </p> | 30 </p> |
| 31 | 31 |
| 32 <pre data-filename="manifest.json"> | 32 <pre data-filename="manifest.json"> |
| 33 { | 33 { |
| 34 "name": "My extension", | 34 "name": "My extension", |
| 35 ... | 35 ... |
| 36 <b>"page_action": { | 36 <b>"page_action": { |
| 37 "default_icon": { <em>// optional</em> | 37 "default_icon": { <em>// optional</em> |
| 38 "19": "images/icon19.png", <em>// optional</em> | 38 "19": "images/icon19.png", <em>// optional</em> |
| 39 "38": "images/icon38.png" <em>// optional</em> | 39 "38": "images/icon38.png" <em>// optional</em> |
| 40 }, | 40 }, |
| 41 "default_title": "Google Mail", <em>// optional; shown in tooltip</em> | 41 "default_title": "Google Mail", <em>// optional; shown in tooltip</em> |
| 42 "default_popup": "popup.html" <em>// optional</em> | 42 "default_popup": "popup" <em>// optional</em> |
| 43 }</b>, | 43 }</b>, |
| 44 ... | 44 ... |
| 45 }</pre> | 45 }</pre> |
| 46 | 46 |
| 47 <p> | 47 <p> |
| 48 If you only provide one of the 19px or 38px icon size, the extension system will | 48 If you only provide one of the 19px or 38px icon size, the extension system will |
| 49 scale the icon you provide to the pixel density of the user's display, which | 49 scale the icon you provide to the pixel density of the user's display, which |
| 50 can lose detail or make it look fuzzy. The old syntax for registering the | 50 can lose detail or make it look fuzzy. The old syntax for registering the |
| 51 default icon is still supported: | 51 default icon is still supported: |
| 52 </p> | 52 </p> |
| (...skipping 13 matching lines...) Expand all Loading... |
| 66 <h2 id="ui">Parts of the UI</h2> | 66 <h2 id="ui">Parts of the UI</h2> |
| 67 | 67 |
| 68 <p> | 68 <p> |
| 69 Like browser actions, | 69 Like browser actions, |
| 70 page actions can have an icon, | 70 page actions can have an icon, |
| 71 a tooltip, and popup; | 71 a tooltip, and popup; |
| 72 they can't have badges, however. | 72 they can't have badges, however. |
| 73 In addition, page actions can appear and disappear. | 73 In addition, page actions can appear and disappear. |
| 74 You can find information about icons, tooltips, and popups | 74 You can find information about icons, tooltips, and popups |
| 75 by reading about the | 75 by reading about the |
| 76 <a href="browserAction.html#ui">browser action UI</a>. | 76 <a href="browserAction#ui">browser action UI</a>. |
| 77 </p> | 77 </p> |
| 78 | 78 |
| 79 <p> | 79 <p> |
| 80 You make a page action appear and disappear using the | 80 You make a page action appear and disappear using the |
| 81 $(ref:pageAction.show) and | 81 $(ref:pageAction.show) and |
| 82 $(ref:pageAction.hide) methods, respectively. | 82 $(ref:pageAction.hide) methods, respectively. |
| 83 By default, a page action is hidden. | 83 By default, a page action is hidden. |
| 84 When you show it, you specify the tab | 84 When you show it, you specify the tab |
| 85 in which the icon should appear. | 85 in which the icon should appear. |
| 86 The icon remains visible | 86 The icon remains visible |
| (...skipping 10 matching lines...) Expand all Loading... |
| 97 <p>For the best visual impact, | 97 <p>For the best visual impact, |
| 98 follow these guidelines:</p> | 98 follow these guidelines:</p> |
| 99 | 99 |
| 100 <ul> | 100 <ul> |
| 101 <li><b>Do</b> use page actions | 101 <li><b>Do</b> use page actions |
| 102 for features that make sense | 102 for features that make sense |
| 103 for only a few pages. | 103 for only a few pages. |
| 104 <li><b>Don't</b> use page actions | 104 <li><b>Don't</b> use page actions |
| 105 for features that make sense | 105 for features that make sense |
| 106 for most pages. | 106 for most pages. |
| 107 Use <a href="browserAction.html">browser actions</a> instead. | 107 Use <a href="browserAction">browser actions</a> instead. |
| 108 <li><b>Don't</b> constantly animate your icon. | 108 <li><b>Don't</b> constantly animate your icon. |
| 109 That's just annoying. | 109 That's just annoying. |
| 110 </ul> | 110 </ul> |
| 111 | 111 |
| 112 | 112 |
| 113 <h2 id="examples"> Examples </h2> | 113 <h2 id="examples"> Examples </h2> |
| 114 | 114 |
| 115 <p> | 115 <p> |
| 116 You can find simple examples of using page actions in the | 116 You can find simple examples of using page actions in the |
| 117 <a href="http://src.chromium.org/viewvc/chrome/trunk/src/chrome/common/extension
s/docs/examples/api/pageAction/">examples/api/pageAction</a> | 117 <a href="http://src.chromium.org/viewvc/chrome/trunk/src/chrome/common/extension
s/docs/examples/api/pageAction/">examples/api/pageAction</a> |
| 118 directory. | 118 directory. |
| 119 For other examples and for help in viewing the source code, see | 119 For other examples and for help in viewing the source code, see |
| 120 <a href="samples.html">Samples</a>. | 120 <a href="samples">Samples</a>. |
| 121 </p> | 121 </p> |
| OLD | NEW |