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

   1 <p>
   2 <img src="{{static}}/images/omnibox.png" width="300" height="150"
   3   alt="A screenshot showing suggestions related to the keyword 'Chromium Search'"/>
   4 </p>
   5
   6 <p>
   7 When the user enters your extension's
   8 keyword, the user starts
   9 interacting solely with your extension.
  10 Each keystroke is sent to your
  11 extension, and you can provide suggestions
  12 in response.
  13 </p>
  14
  15 <p>
  16 The suggestions can be richly formatted
  17 in a variety of ways.
  18
  19 When the user accepts
  20 a suggestion, your extension is notified
  21 and can take action.
  22 </p>
  23
  24 <h2 id="manifest">Manifest</h2>
  25
  26 <p>
  27 You must include an <code>omnibox</code> <code>keyword</code> field
  28 in the <a href="manifest.html">manifest</a>
  29 to use the omnibox API.
  30 You should also
  31 specify a 16x16-pixel icon, which will be
  32 displayed in the address bar when suggesting that users
  33 enter keyword mode.
  34 </p>
  35
  36 <p>
  37 For example:
  38 </p>
  39
  40 <pre data-filename="manifest.json">
  41 {
  42   "name": "Aaron's omnibox extension",
  43   "version": "1.0",
  44   <b>"omnibox": { "keyword" : "aaron" },</b>
  45   <b>"icons": {</b>
  46     <b>"16": "16-full-color.png"</b>
  47   <b>},</b>
  48   "background": {
  49     "persistent": false,
  50     "scripts": ["background.js"]
  51   }
  52 }
  53 </pre>
  54
  55 <p class="note">
  56 <strong>Note:</strong>
  57 Chrome automatically creates a grayscale version of
  58 your 16x16-pixel icon. You should provide
  59 a full-color version so that it can also be
  60 used in other situations that require color.
  61 For example, the <a href="contextMenus.html"
  62 >context menus API</a> also uses a 16x16-pixel
  63 icon, but it is displayed in color.
  64 </p>
  65
  66
  67 <h2 id="examples">Examples</h2>
  68
  69 <p>
  70 You can find samples of this API on the
  71 <a href="samples.html#omnibox">sample page</a>.