Chrome Extensionsの作り方 2009/06/25版

2009 June 25th

Chrome Extensionsの作り方 2009/06/25版

Chrome, Extensions

続きは、特集：先取り！ Google Chrome Extensions｜gihyo.jp … 技術評論社と、連載：続・先取り！ Google Chrome Extensions｜gihyo.jp … 技術評論社をどうぞ。

用意するもの

Google Chrome 3.0.190.1以降(dev版か、latest Chromium snapshotがオススメ。)

最低限必要なもの

manifest.json

JSON(not JavaScriptなので、値を'ではなく"で囲まないといけないなど、割と厳格なので注意)で書く拡張の定義ファイルです。

一応必須といえるのはnameとkeyの2つですが、とりあえずはnameさえあればOK。keyはパッケージするときに自動で振られるので自分で書く必要はありません。

{
  "content_scripts": [
    {
      "js": [ "all.js" ],
      "matches": [ "http://*/*" ]
    },
    {
      "js": [ "hatena.js" ],
      "css": [ "hatena.css" ],
      "matches": [ "http://d.hatena.ne.jp/*" ]
    }
  ],
  "toolstrips": [ "toolstrip.html" ],
  "background_page": "background.html",
  "permissions": [ "http://ss-o.net/*" ],
  "description": "sample extension",
  "name": "sample extension",
  "version": "0.0.1"
}

content_scriptsは(Greasemonkeyのように)マッチしたURL(The Chromium Projects: Match patterns)に対して指定のJSとCSSを適用します。
toolstripsはウィンドウの下に出るツールボックス(中身はHTMLで書きます)です。1つのウィンドウに対して1つずつ設置されるので、一度ウィンドウを開いたら開いたままの状態です。そのため、各タブから表示を制御しようとする(例えば今見ているページのブクマ数を表示など)と、フォーカスの切り替えやバックグラウンドで開いたページなどの関係で制御がややこしくなります。
background_pageはウィンドウが増えると一緒に増えてしまうtoolstripsと異なり、常にひとつだけ開いたままにできるページです。これを利用してRSSリーダーなどを作ることができるはずです(ただし、現時点ではDB系の機能が使えないのですが…)。background_pageはtoolstripsの不便さから最近追加されたばかりでまだ試したことがありません。試したら詳細を追記します。
permissionsでは、拡張からのクロスドメインアクセスを許可するURLを定義できます。
description、versionは名前の通りです。なお、versionが同じだと上書きされないので、更新時は必ずversionを上げる必要があります。

manifest.jsonのサンプル:実際にある拡張で使用しているもの

http://ss-o.net/chrome_extention/ChromeGuestures/manifest.json

パッケージング

manifest.jsonと、js, css, htmlを一通り用意して適当な名前を付けたディレクトリにまとめます。

コマンドラインから、

<Chrome本体のパス>\chrome.exe --pack-extension=<拡張のディレクトリ>

というコマンドを実行すると拡張(ディレクトリ名.crxファイル)が出来上がります。これをChromeを--enable-extensionsをつけて起動した状態でダブルクリックすれば拡張がインストールされます。

また、.crxファイルと同じ階層に同じ名前で.pemファイルが作られます。これは拡張の更新時に同じ作者の同じ拡張であることを保証するためのプライベートキーです。

<Chrome本体のパス>\chrome.exe --pack-extension=<拡張のディレクトリ> --pack-extension-key=<プライベートキーファイルのパス>

のようにして更新パッケージを作成します。将来的にAutoUpdateにするため、こういった仕様になっているそうです。

チップス

Chrome起動中にパッケージを作成できない→latest Chromium snapshotからchrome-win32.zipを落として適当な場所に解凍し、これを使ってパッケージングすると便利です。
サンプルがもっとほしい→http://src.chromium.org/viewvc/chrome/trunk/src/chrome/test/data/extensions/samples/ にもオフィシャルなサンプルがあります。また手前ですが、 http://ss-o.net/chrome_extention/ に幾つかの自作extensionがあります( autopatchwork - Project Hosting on Google Codeも)。
toolstripsを右クリックするとtoolstripsのデバッグコンソールが立ち上がります。chrome://extensions/ からInspectすることもできます。
拡張のJavaScriptからは、Google Page Speed を読む - blog.8-p.infoで言及されていた、Google製のJavaScriptライブラリが扱えます。window.googからアクセスできます(デバッグコンソールでも確認できます)。ただ、Page Speedのソースとは微妙に違うみたいです。