Webアプリを公開しよう! Chrome Web Store/Apps入門

第8回 Webアプリを作ろう#5――Content Scripts

この記事を読むのに必要な時間:およそ 6 分

前回は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の目的地を設定します。

図1 Googleマップとの連携

図1 Googleマップとの連携

Webアプリの構成

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

画像

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の実行タイミングの指定などさまざまな設定項目があります。

表1 マニフェストファイルのContent Scripts関連項目

フィールド名説明
content_scripts対象のWebサイトで任意のJavaScriptやCSSを適用する設定項目をオブジェクト配列で指定
  matches対象のWebサイトのURLを配列で指定
"http://example.com/*"マッチパターン
  css挿入するCSSファイルを配列で指定
  js実行するJavaScriptファイルを配列で指定
  run_atJavaScriptを実行するタイミングを指定
"document_start", "document_idle"(デフォルト), "document_end" の3つが指定可能
  all_framesすべてのフレーム要素でスクリプトを実行するかどうかを指定(デフォルト:false)
  include_globs"matches" からさらに適用するパターンを指定
  exclude_globs"matches" からさらに除外するパターンを指定

著者プロフィール

吉川徹(よしかわとおる)

普段は,普通のSIer。Webからローカルアプリケーション,データベースからインフラ周りに至るまで,何でも担当する雑食系。主にHTML5開発者コミュニティ「HTML5-developers-jp」で活動中。同コミュニティ主催の「HTML5とか勉強会」のスタッフを務め,HTML5の最新動向を追っている。

コメント

コメントの記入