Google Chrome 拡張ことはじめ

2009年12月8日*1(日本時間では12/9朝)、拡張機能が有効(除くOSX)な Google Chrome ベータ版がリリースされました。同時にこつこつ開発を続けてた、はてなブックマーク Google Chrome 拡張ベータ版も公開したので、良かったら使ってみてください :D

というわけで、Google Chrome 拡張を作ってみたのですが、その時に参考にした資料やドキュメントをまとめてみました。

Google Chrome 拡張APIドキュメント

基本的に上のURLで必要なAPIのドキュメントはまとめられています。またページ中央下の「Doc versions」でブラウザのバージョンに沿ったドキュメントが公開されてるので、beta向けのドキュメントなら etentions/beta を読むと良いでしょう。なお、現在のベータで実装されている拡張APIは、バグフィックス以外は正式版と変更はない予定みたいです。
また、API の名前や引数が書かれた JSON もあります。一時期 experimental な実験中のAPIも使っていたため時々確認していました。

オフィシャルサイト

この辺をよく見ていました。特に chromium extentions グループは Google の中の人がだいたい返答をくれるので、拡張APIや挙動に対する疑問があれば投げると良いでしょう。

日本語ドキュメント

id:os0x さんが gihyo.jp にて連載されている Google Chrome 拡張記事が非常に参考になります。徐々に機能を追加していく課程もすばらしいです。今は Toolstrips さん*2がいないのでうまく動かない箇所もありますが、基本的な箇所は現在のAPIでもだいたい使えるため必読です。ちょうど拡張を作ろうと思ったタイミングで記事の連載が始まったので、この記事がなかったらいまごろどうなっていた事やら…。id:os0x さんのはてなダイアリー日記なども参考になり、os0x さんには足を向けて寝れない日々です。

git レポジトリ

chromium の git でのソースコード公開も行われおり、実際の挙動を把握するため、よく git grep API名 などで直接ソース追っかけていました。以下に git での chromium の利用が書かれています。

ひな形作成

chrome-extention-statrter というジェネレータでひな形を作りました。

このジェネレータを作成すると同時に Rakefile ができあがるので

rake package

で拡張の .crx パッケージを作成しています。また crx パッケージの作成には、id:Constellation さん作のコマンドラインから chrome パッケージが作成できる crxmake を使っています。便利！

Chrome 拡張開発用の、ショートカットと引数

拡張を開発するときには、Google Chrome のショートカットを指定し、以下の引数を指定して開発をしていました。

chrome.exe --enable-logging --purge-memory-button --load-extension="C:\chrome\bookmark-googlechrome-extension\src" --user-data-dir="C:\tmp\chrome_dev_data"
  • --purge-momery-button
    • 拡張がメモリーリークしないかの確認のため、Shift+Esc で Chrome 専用のタスクマネージャを起動してチェックしていました
  • --load-extension
    • 開発している拡張の実ソースコードを引数として渡すと、その拡張を読み込んだ状態で Chrome が立ち上がります。Chrome の拡張機能の画面での拡張の再読込や disable/enable 化は再読込されてないケースが background page ã‚„ browser action で多発したため、なにかとブラウザ再起動しながら開発していたので、そのような場合便利です。
  • --user-data-dir
    • ユーザのデータを保存するディレクトリです。Firefox でいうユーザプロファイルのようなやつです。まっさらな環境で試したい時や、通常閲覧ブラウザとしての Chrome と設定を分けておきたいため、指定します

background ページで、特定ページを開く

拡張開発ではよくブラウザを再起動するため、以下のような感じで毎回ブラウザ起動時に特定ページを開いて test の実行や、popup ウィンドウのデバッグ(popup ウィンドウは、タブとして開かないと非常に開発しにくいです)を行っていました。

/*
setTimeout(function() {
    var url = 'http://www.hatena.ne.jp/';
    url = '/background/popup.html?debug=1&url=' + encodeURIComponent(url);
    chrome.tabs.create({
        url: url,
    });
}, 10);

setTimeout(function() {
  chrome.windows.create({url:'../tests/test.html'}); // test を開いて実行する
}, 10);
*/

利用しているライブラリ

JavaScript の組み込みクラスの prototype の toJSON を汚染しないライブラリ(汚染するライブラリを利用すると、JSON の挙動に影響が出る可能性があります)なら、基本どんなライブラリでも利用できると思います。すべての箇所が HTML + JS で構築されているので、ほとんどのJSライブラリが利用可能なのです。
はてなブックマーク chrome 拡張では以下のライブラリを利用していますが、ある程度の規模になるまではライブラリを使わず開発した方がシンプルにまとまって良いと思います。

Google Chrome 拡張の全体的な感想

Chrome の拡張APIは、Firefox 拡張に比べできるとは格段に少ないのですが、シンプルにコンパクトにまとまっており、HTML + JavaScript の知識さえあればすぐに開発に取りかかれることが大きな魅力ですね。学習コストが非常に低いです*3。
また UI も拡張からは最低限、しかも1拡張に付き1アイコン (BrowserAction/PageAction どちらか一つだけ) のみの実装しかできないという割り切り加減も、乱雑な UI が出ないという点では評価できるでしょう。
しかし現状では反対に云えばどの拡張も操作や通知にアイコンを表示し、しかもその領域が結構広いため、たとえば Firefox でいうステータスバーにシンプルな小さいアイコンだけ表示や、メニューを拡張することで行えるような実装でもアイコンが必要となり、ツールバーにアイコンが表示されすぎるきらいがあります。
今日の拡張ギャラリーを見ると、ブックマークレットレベルで事足りる機能も BrowserAction でわざわざ実装してあったりするので、その辺の拡張は徐々に使われなくなるんじゃないかなーと思ってます。
他にも BrowserAction のポップアップウィンドウが拡張API経由で開けなかったりして*4、キーボード派には結構つらかったりします。ただ次の次の正式版(M5, 現在の正式版はM3)あたりではより必要とされれている機能はAPIにもりこまれ、より洗練されていきそうなので期待しています。

というわけで、非常に簡単に拡張開発ができるので、ベータリリースで API が変わる心配がほとんど無くなった今、さっそく皆さんも作ってみてはいかがでしょうか！

*1:そう、紺野あさ美さんがテレ東アナウンサーに内々定が決定した日です！！

*2:以前の dev 版で実装されていた、ツールバー的なUIですが、ばっさり削除されました。Toolstrips さんどこいってもうたんや…。

*3:Firefox も JetPack で簡単に拡張を作成できるプラットフォームを用意しているところですね

*4:http://groups.google.co.jp/group/chromium-extensions/browse_thread/thread/be147238af6d3029/17d9ff73f1aa7af0#17d9ff73f1aa7af0 で提案はしてありますが、実装は今のところされなさそうな感じです