概要

基本

拡張機能とは、Google Chromeブラウザの機能を追加するための、HTMLやCSS、JavaScriptなどの必要なファイルをZIP圧縮でまとめたものである。基本的に拡張機能は全てウェブページであり、ブラウザがウェブコンテンツ用に提供している機能は、XMLHttpRequestやJSON、HTML5でのローカルストレージに至るまで、あらゆるAPIを利用することが出来る。

多くの拡張機能は、ブラウザアクションやページアクションの形でGoogle Chromeにユーザインターフェースを追加することになる。また、拡張機能はお気に入りやタブなどのブラウザの機能もプログラムから操作することが出来る。ウェブページやサーバとの連携には、コンテント・スクリプトや生成元横断XMLHttpRequestを用いることも可能。

注意: それぞれの拡張機能は殆ど、ブラウザアクションとページアクションのいずれか1つを実装することになる。その際、拡張機能が殆どのページに関係するならばブラウザアクションを、アイコンがページによって表示されたりされなかったりするようなものであればページアクションを用いるようにする。

構成ファイル

拡張機能は、次のようなファイルにより構成される。

拡張機能を開発している間は、これらのファイルを1つのフォルダにまとめて入れておく。提供する段階になったら、そのフォルダをGoogle Chromeにより .crx という拡張子の特殊なZIPファイルに圧縮してやる。(パッケージング参照)

ファイルの参照

どんなファイルでも拡張機能に含めることが出来る。そのファイルを参照する方法だが、一般的なHTMLページと同様の方法で、通常は相対パスにて指定することになる。例えば拡張機能のフォルダ下に images というサブフォルダがあり、そこに myimage.png という画像がある場合、拡張機能に表示させるには次のように記述する。

Google Chromeデバッガなどを使っていれば気付くように、各ファイルに絶対パスでアクセスする場合、URLは次のようになる。

chrome-extension:///

ここで言う とは、拡張機能ごとに固有に割り振られる一意なIDのことである。このIDは, chrome://extensions を開き、読み込んだ拡張機能を見れば確認できる。

マニフェスト・ファイル

最も重要なファイルである manifest.json は、拡張機能に関する情報の提供や、利用する機能の範囲を定義を行う。次に、ブラウザアクションを使って google.com から情報を取得する拡張機能の、典型的な manifest.json ファイルの例を載せておく。

{
  "name": "My Extension",
  "version": "2.1",
  "description": "Gets information from Google.",
  "icons": { "128": "icon_128.png" },
  "background_page": "bg.html",
  "permissions": ["http://*.google.com/", "https://*.google.com/"],
  "browser_action": {
    "default_title": "",
    "default_icon": "icon_19.png",
    "popup": "popup.html"
  }
}

詳細はManifest File参照。

アーキテクチャ

バックグラウンド・ページ

殆どの拡張機能は、拡張機能のメインロジックを受け持つ見えないページであるバックグラウンド・ページを持つことになる。

上図の状態は、少なくとも2つの拡張機能をインストールした環境である。黄色いアイコンはブラウザアクション、青いアイコンはページアクションを意味する。HTMLファイルであるバックグラウンド・ページはJavaScriptコードを含んでおり、ブラウザアクションもページアクションも、それぞれの拡張機能が持つバックグラウンド・ページから制御することが出来る。

ページ

拡張機能が持つことのできるHTMLページは、バックグラウンド・ページだけではない。例えば、ブラウザアクションをクリックした際に呼び出されるポップアップも、HTMLファイルになる。また、tabs.createや[[[window.open]]]などを用いて、拡張機能に内包させた任意のHTMLを表示させるようなことも出来る。

同じ拡張機能にある各HTMLページは、相互に他方のDOMにアクセスでき、また関数をお互いに呼び出したり出来る。

下図はポップアップの例になる。ポップアップページもまたHTMLファイルであるが、バックグラウンド・ページにある関数を呼び出すことが出来るので、重複したコードを書く必要は無くなる。

詳しくはブラウザアクションなどを参照。

コンテント・スクリプト

もし拡張機能が表示されているウェブページを操作したいのであれば、コンテント・スクリプトが必要になる。コンテント・スクリプトはブラウザに読み込まれたウェブページに対して、JavaScriptを実行するためのものである。そのためコンテント・スクリプトは拡張機能のパッケージに含まれるが、実行はウェブページの一部であると考えなければならない。

コンテント・スクリプトはブラウザが訪れたウェブページを詳細に読み込み、それを変更することが出来る。下図にあるように、コンテント・スクリプトはウェブページを操作できるが、一方で自分が所属する拡張機能のバックグラウンド・ページのDOMを操作するようなことは出来ない。

だからといって、コンテント・スクリプトは親の拡張機能と完全に切り離されているわけではない。メッセージ機能により、親拡張機能と通信することが出来る。例えば、コンテント・スクリプトがブラウザ上のページにRSSフィードを見つけた際に、その旨をメッセージで通知したり、或いはバックグラウンド・ページがコンテント・スクリプトにブラウザアクションの見た目を変化させる必要があるかを尋ねたりすることが出来る。

詳しくはメッセージ参照。

ページ間の対話

拡張機能に含まれるページは、しばしば相互に対話が必要になる。拡張機能下の全てのページは同じプロセス、同じスレッドで実行されるため、各ページはお互いの関数を直接呼び合うことが出来る。

ページは互いに extension.getViews や chrome.extensionAPIを使って探し合う。一度相手を参照できれば、相手の関数を呼んだり、DOMを操作したりすることが可能になる。