gihyo.jp/dev/serial/01/chrome-web-store/0006">前回はWebアプリの設定と保存を通して，Options PageとWeb Storageについて詳細を解説しました。今回は引き続きOdometerに機能を追加する形で，Context MenusとOmniboxについて解説していきたいと思います。

検索ボックスとコンテキストメニューの拡張

これまでは，Odometerを使うためにWebアプリを起動して画面から住所を検索し，目的地を入力していました。わざわざWebアプリを起動しなくても，もっと素早く住所を検索したいとか，ほかのWebサイトにある住所を直接検索したいといった要望があるかもしれません。これらを実現するための仕組みとして，Chromeの検索ボックス（アドレスバー）を拡張するOmniboxやWebサイト内でのコンテキストメニュー（右クリックメニュー）を拡張するContext Menusがあります。今回はこの2つを使って，検索ボックスとコンテキストメニューから素早くOdometerを呼び出し，住所検索を行えるように修正します。

Webアプリの構成

今回は，Webアプリを構成するファイルに追加はありません。odometer.jsとbackground.js，そしてmanifest.jsonを変更して機能を追加しています。

{
  "name": "Odometer",
  "description": "距離計",
  "version": "0.4",
  "app": {
    "launch": {
      "local_path": "main.html"
    }
  },
  "icons": {
    "16": "icon_16.png",
    "48": "icon_48.png",
    "128": "icon_128.png"
  },
  "omnibox": {
    "keyword": "Odometer"
},
  "options_page": "options.html",
  "background_page": "background.html",
  "permissions": [
    "geolocation",
    "notifications",
    "background",
    "contextMenus",
    "tabs"
  ]
}

検索ボックスを拡張するための指定として，新たに "omnibox" という項目を追加しています。その中の "keyword" は，検索ボックスからOdometerを呼び出すためのトリガーとなる最初のキーワードを指定します。ここでは "Odometer" を指定していますが，大文字と小文字は区別しません。詳細は後述します。

コンテキストメニューを拡張するためには，"permissons"に "contextMenus" を追加します。また，検索ボックスやコンテキストメニューからOdometerを呼び出すために "tabs" も合わせて追加しています。

Omnibox

Omniboxは，Chromeの検索ボックス（アドレスバー）を拡張するための仕組みです。みなさん普段はこの検索ボックスを使ってGoogleなどで検索をしているかと思います。Omniboxでは，この検索ボックスからキーワードを検索エンジンではなくWebアプリへ渡すことができるようになります。また，キーワードを入力する際のサジェストなどもカスタマイズすることができます。

Omniboxの使い方

先に実際のOmniboxの使い方を説明しましょう。検索ボックスには，検索エンジンによる検索のほかに，お気に入りや履歴などからもサジェストが表示されます。その中でWebアプリのアイコンが付いたサジェストが，そのWebアプリを呼び出すためのものになっています。

1. 検索ボックスにマニフェストファイルで指定したキーワードを入力する

   図3　検索ボックスにキーワードを入力

2. Webアプリのアイコンが表示されたサジェストを選択する

   図4　Webアプリのサジェストを選択

   図5　Webアプリに渡すキーワード

3. エンターキーで入力完了とWebアプリの呼び出し

4. 続けてWebアプリに渡すキーワードを入力

   図6　Webアプリの呼び出し