Home | History | Annotate | Download | only in static 
      1 <div id="pageData-name" class="pageData">Page Actions</div>
      2 
      3 <!-- BEGIN AUTHORED CONTENT -->
      4 <p>
      5 Use page actions to put icons inside the address bar.
      6 Page actions represent actions
      7 that can be taken on the current page,
      8 but that aren't applicable to all pages.
      9 Some 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>
     17 The RSS icon in the following screenshot
     18 represents a page action
     19 that lets you subscribe to
     20 the RSS feed for the current page.
     21 </p>
     22 
     23 <img src="images/page-action.png"
     24   width="361" height="79" />
     25 
     26 <p>
     27 If you want the extension's icon to always be visible,
     28 use a <a href="browserAction.html">browser action</a> instead.
     29 </p>
     30 
     31 <p class="caution">
     32 <strong>Note:</strong>
     33 Packaged apps cannot use page actions.
     34 </p>
     35 
     36 
     37 <h2 id="manifest">Manifest</h2>
     38 
     39 <p>
     40 Register your page action in the
     41 <a href="manifest.html">extension manifest</a>
     42 like 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>
     59 Like browser actions,
     60 page actions can have an icon,
     61 a tooltip, and popup;
     62 they can't have badges, however.
     63 In addition, page actions can appear and disappear.
     64 You can find information about icons, tooltips, and popups
     65 by reading about the
     66 <a href="browserAction.html#ui">browser action UI</a>.
     67 </p>
     68 
     69 <p>
     70 You 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.
     73 By default, a page action is hidden.
     74 When you show it, you specify the tab
     75 in which the icon should appear.
     76 The icon remains visible
     77 until the tab is closed
     78 or 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,
     88 follow 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>
    106 You 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>
    108 directory.
    109 For 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