chrome extensionのつくりかた

しばらくチェックしてなかった間にchromiumでextensionが作れるようになっていました。

といっても、いまのところはchromiumのGreasemonkeyの仕様がちょっとだけ拡張されてextensionと呼ぶことにしたというだけで、自由度の点でFirefoxのものには遠く及びません。Greasemonkeyとの機能的な違いは3つくらい。

• CSSを挿入させることができてstylishみたいに使える(未実装)
• (明示的には書いてないけれど)自動的にアップデートできる(未実装)
• ドキュメントが読み込まれた後だけでなく、ドキュメントが読み込まれる前に実行させることができる

作り方

作り方はChrome Extension HOWTO ‎(Chromium Developer Documentation)‎に書いてあります。使ったchromiumのバージョンはIndex of /buildbot/snapshots/chromium-rel-xpの12074バージョン。

manifest.jsonを書く

はじめに適当なディレクトリを作って、その中にmanifest.jsonというextensionの名前やバージョンを定義するファイルを書きます。

サンプルに従ってc:¥myextensionディレクトリを作ってmanifest.jsonには下の通りに書きました。

{
  "format_version": 1,
  "id": "0a65ddd0c050d1475a70c177a47909a9a47909a9",
  "version": "1.0",
  "name": "My First Extension",
  "description": "The first extension that I made."
}

extensionを実行するURLを正規表現もどきで書く所はGreasemonkeyのスクリプトと全く同じです。なんでこういう仕様なのかはThoughts on scaling – Chromium-dev | Google Groupsを読むとちょっと納得できます。おそらく今後どのイベントに反応してどうささせるかを柔軟に登録できるようになるのでしょう。

hello_world.htmlを書く

これべつにいらないんですけどextensionには(ちょっと前までのGreasemonkeyみたいに)jsファイルだけでなくhtmlファイルも入れることができます。

<h1>Hello, World!</h1>

動作確認

ここでまずextensionがちゃんと読み込まれるようになっているか確認するために、一度chromiumにロードさせてみます。
--enable-extensionsをつけて--load-extensionでextensionのディレクトリを指定して読み込ませます。

chrome.exe --enable-extensions --load-extension="c:\myextension"

うまく読み込めていればchrome-extension://0a65ddd0c050d1475a70c177a47909a9a47909a9/hello_word.htmlにアクセスするとこう表示されます。

スクリプトの記述

ちゃんとextensionが読み込まれているのを確認したら実際にページの内容を変更したりするためのコードを書いてみます。chromiumではこのスクリプトのことをcontent scriptと呼ぶそうです。

c:¥myextensionディレクトリに新しくfoo.jsを作って

document.images[0].src = "http://bit.ly/1293Af";
document.images[0].height = "auto";

ページが読み込まれたときにfoo.jsが実行されるようにmanifest.jsonに記述を追加します。

{
  "format_version": 1,
  "id": "0a65ddd0c050d1475a70c177a47909a9a47909a9",
  "version": "1.0",
  "name": "My First Extension",
  "description": "The first extension that I made.",
	 "content_scripts": [
    {
      "matches": ["http://www.google.co.jp/*"],
      "js": ["foo.js"]
    }
  ]
}

これでhttp://google.co.jp/を開くとロゴが置き換わる、はずなんですが、テストに使った2.0.171.0がはずれなのかなんなのか動きませんでした。
chrome-ui://extensions/で確認する限りではうまく読み込まれてるようなんですけど…

ドキュメントが読み込まれる前に実行させるには

manifest.jsonに"run_at": "document-start"を追加することで、ドキュメントが読み込まれる前(おそらくheadが構築された後でbodyが構築される前)にスクリプトを実行させることができます。このタイミングでスクリプトを実行できると確かに便利なこともありますが、おそらくCSSを読み込むことを念頭に設定されたタイミングなのでしょう。

まとめ

いまのところchomiumのextensionはGreasemonkey(GM_xmlHttpRequestもまだドメインを超えられません)+Stylishの機能しかありません。