Firefox3で動くGreasemonkeyを作る&新機能の@import @require

少し前にFirefox3 beta1がリリースされたものの、いろいろ拡張機能が動かないから使えないもんねーと思ってスルーしていたけれど、ちょっと移行してみようかと試してみたら、まずGreasemonkeyがFirefox3に対応していませんでした...

が、検索してみるとGreasemonkeyのchange log /trunk/src (log) - greasemonkey - DevjaVuにAdding FF3b supportと書かれているのを発見。最新版なら動くっぽいのでチェックアウトしてきて試してみたら、新しく@importと@requireという新機能もついていたのでちょっと調べてみました。

Firefox3対応のGreasemonkeyのビルドとインストール

ビルドと言ってもFirefoxのaddonはプラットホームに依存しないものはzipファイルを作るだけなので、たいていのUNIX系OSならビルドできると思います。自分はOSXでビルドしました。まずsvnのリポジトリをチェックアウトしてきてbuild.shを実行するだけです。

svn co http://svn.devjavu.com/greasemonkey/trunk/src/ .
sh build.sh

そうするとgreasemonkey.xpiという拡張機能のファイルができあがるのでそれをFirefoxのウインドウにドラッグアンドドロップすれば、拡張機能のインストールダイアログが出てきて、ふつうに動きました。 アイコンが微妙に変わってます。

つかいかた

svnに入っているバージョンのGreasemonkeyには、user.jsの先頭にスクリプトの名前や、有効にするドメインなどのメタデータを記述する部分に@importと@requireというのが新しく記述できるようになっています。

このパッチについてGreasemonkey Imports | The Experiments of Gareth Andrewに書かれていたので読んでみると(ここに書かれているものは微妙に関数名とかが実際にGreasemonkeyに実装されているものと違っていたりします)、今までのGreasemonkeyスクリプトは、ひとつのuser.jsファイルの中に全部が入っている必要があったのでCSSや画像をいっしょにしたいと思うとdata:image/gif;base64,のようにデータスキームにして入れておいたりする必要がありました。が、この機能を利用するとuser.jsをダウンロードするとき一緒に別ファイルになっている画像ファイル等もダウンロードしてくれて実行時にはダウンロードしたローカルのファイルを読むようになります。

使い道としては

1. Separation of html and stylesheets from code.
2. Embedding images
3. Embedding other media (Might not work -see #Limitations)
4. Writing modular code
5. Reusing existing javascript libraries
6. Building greasemonkey specific libraries

というのがリストアップされています。

ちなみにこうしてダウンロードされた依存ファイルは、そのファイルを@importや@requireとして記述していたuser.jsからのみ参照できるようになっていて、また、おなじURLから@importしていても参照しているuser.jsが別なら別のファイルとして個別に管理されています。

@importも@requireも、ダウンロードされるのはuser.jsをインストールしたとき一回だけで、一定期間ごとに再度ダウンロードされたりはしないので自動更新されるGreasemonkeyスクリプトのようなものには使えません。あくまで、いままでひとつのファイルに全部を入れておかないといけなかったのが複数ファイルに分割できるようになったというかんじです。

@require

@requireはちょうどC言語のincludeと同じようなもの(PHPだったらrequireみたいなもの)で、ファイルの内容がそのままuser.jsの先頭に展開されてスクリプトが実行されます。

@require [URL] 

という形式で記述して、URLにはhttp, https, ftpのみが指定できます。chromeやfileは指定できないようになっています。

@import

@requireはスクリプト以外のCSSや画像などのファイルをあとから読み込むためのものです。

@import [name] [URL] 

という形式で記述します。nameはあとでスクリプトからURLのファイルを参照するときのための識別用文字列です。こちらは@requireのように自動的にスクリプトの中に取り込まれたりはせず、実行時にGM_getImportURLまたはGM_getImportTextに識別用文字列を渡してファイルの内容を読み込むようになっています。GM_getImport*が呼ばれたタイミングでファイルから実際に読み込みが行われます。

GM_getImportTextで読み込んだ場合は、ファイルの中身がそのまま文字列として帰ってきます。GM_getImportURLで読み込んだ場合は、ファイルの中身がdata:{MIMEType};base64の形式で帰ってきます。前者はCSSやHTMLを読み込むとき、後者は画像などのバイナリファイルを読み込むとき用に使うのでしょう。

まとめ

というわけでFirefox3用の新しいGreasemonkeyをビルドする方法と、新しいGreasemonkeyの新機能紹介でした。 @requireも@importも地味に便利そうです。