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