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