前回はWebアプリの検索ボックスとコンテキストメニューの拡張を通して，OmniboxとContext Menusについて詳細を解説しました。今回は，任意のWebサイトでJavaScriptを実行できるContent Scriptsについて解説していきたいと思います。

ほかのWebサイトと連携する

みなさんは，Webアプリを使っていてほかのWebサイトと連携して欲しいと思ったことはありませんか。例えば，あるWebサイトから情報を抜き出して欲しかったり，もしくはユーザーインフェースを変更・追加して直接Webアプリを操作したかったりといった内容です。それらは，Content Scriptsの仕組みを利用することで実現可能です。Content Scriptsは，対象のWebサイトで任意のJavaScriptを実行することができます。

今回の機能追加では，GoogleマップのWebサイトと連携して目的地を設定できるようにしてみます。具体的には，Googleマップの検索ボタンの隣にOdometerの「目的地設定」ボタンを追加します。「⁠目的地設定」ボタンをクリックすると，Googleマップで表示している緯度・経度を使ってOdometerの目的地を設定します。

Webアプリの構成

今回は，Webアプリを構成するファイルにcontent_script.jsを追加しています。これは，Googleマップのサイト上で実行されるJavaScriptになります。そのほかにもodometer.jsとbackground.js，そしてmanifest.jsonを変更しています。

{
  "name": "Odometer",
  "description": "距離計",
  "version": "0.5",
  "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",
  "content_scripts": [
    {
      "matches": ["*://maps.google.co.jp/*", "*://maps.google.com/*"],
      "js": ["js/content_script.js"]
    }
  ],
  "permissions": [
    "geolocation",
    "notifications",
    "background",
    "contextMenus",
    "tabs"
  ]
}

Content Scriptsを利用するには，マニフェストファイルで "content_scripts" 以下の項目を設定します。"matches" で，対象のWebサイトを指定します。ここでは，Googleマップのドメインを2つ指定しています。また，実行するJavaScriptファイルとして "js" に今回追加したcontent_script.jsを指定しています。ここで設定した項目以外にもJavaScriptの実行タイミングの指定などさまざまな設定項目があります。