src/chrome/common/extensions/docs/templates/intros/pageAction.html

   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">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">extension manifest</a>
  29 like 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>
  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
  50 can lose detail or make it look fuzzy. The old syntax for registering the
  51 default 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/icon38.png"  <em>// optional</em>
  61     <em>// equivalent to "default_icon": { "38": "images/icon38.png" }</em>
  62   }</b>,
  63   ...
  64 }</pre>
  65
  66 <h2 id="ui">Parts of the UI</h2>
  67
  68 <p>
  69 Like browser actions,
  70 page actions can have an icon,
  71 a tooltip, and popup;
  72 they can't have badges, however.
  73 In addition, page actions can appear and disappear.
  74 You can find information about icons, tooltips, and popups
  75 by reading about the
  76 <a href="browserAction#ui">browser action UI</a>.
  77 </p>
  78
  79 <p>
  80 You make a page action appear and disappear using the
  81 $(ref:pageAction.show) and
  82 $(ref:pageAction.hide) methods, respectively.
  83 By default, a page action is hidden.
  84 When you show it, you specify the tab
  85 in which the icon should appear.
  86 The icon remains visible
  87 until the tab is closed
  88 or 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,
  98 follow 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>
 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/extensions/docs/examples/api/pageAction/">examples/api/pageAction</a>
 118 directory.
 119 For other examples and for help in viewing the source code, see
 120 <a href="samples">Samples</a>.
 121 </p>