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