Firefox 拡張機能の「開発とっかかり」のチュートリアル

firefox

id:n_shuyo:20070118:firefox にても書いたが、チュートリアルがないために Firefox 拡張開発の敷居が高くなってしまっているんじゃないかと感じている。
XUL とかは人に説明できるほど詳しくないが、「開発の始め方」のチュートリアルであれば自分にも書けそう。ということで以下にさっくりまとめてみた。
より詳しい人が突っ込んでくれてさらに親切なものになると嬉しい。


★★2/8 一部追記：GUIDについての記述を追加した


ちなみに http://firefox.geckodev.org/index.php?%E6%8B%A1%E5%BC%B5%E3%81%AE%E4%BD%9C%E6%88%90 でも同じサンプルを使ってチュートリアル的にまとめてあるが、サンプルを改変した後にわざわざ jar を作り直す手順になっているのが面倒である。ここではそれが不要（コードを書き換え→firefox 再起動だけで反映）となっている。


なお、ここにまとめたのは本当に「開発とっかかり」であり、サンプルプログラムに対してコードを書き換え、動作に反映されるのを確認するところまでになっている。
なので、実際に開発を進めるために必要な知識や、パッケージ作成手順などは含まれていない。あしからず。

用意するもの

拡張サンプルの設置

以下、改変作業が出来るようにサンプルアプリケーションを設置する。
Windows の場合で説明するが、profile ディレクトリの場所以外はおそらく linux などでも同じ手順で大丈夫だと思う（やったことないので違ったらごめんなさい）。

  • helloworld.xpi を展開する
    • helloworld.xpi は zip ファイルなので、unzip でそのまま展開が可能
    • 拡張子が .zip でなければ展開できないツールなら、ファイル名を helloworld.zip に書き換えてもOK
cd \works\firefox\helloworld
unzip helloworld.xpi
    • 展開すると c:\works\firefox\helloworld に以下の３ファイルが生成される
chrome/helloworld.jar
install.js
install.rdf
  • install.rdf を書き換える
    • install.rdf は拡張をインストールする際のスクリプトだが、今回はこの内容や書き方の説明は省く。
    • 対応バージョンを記述するところがあり、このサンプルのままでは 2.0.1 で動作しないので、書き換える
<em:minVersion>0.7</em:minVersion>
<em:maxVersion>1.5</em:maxVersion>
    • これを以下のように書き換えることで、2.x でこのサンプルが動作することを指定できる
<em:minVersion>0.7</em:minVersion>
<em:maxVersion>2.*</em:maxVersion>
  • firefox から拡張機能への参照を記述
    • install.rdf の始めの方に以下のように記述された行がある
<em:id>{9AA46F4F-4DC7-4c06-97AF-5035170633FE}</em:id>
    • これはこの拡張機能に付けられた ID で、firefox はこの ID で拡張機能を特定する
    • firefox からこの拡張機能を参照させるため、下記のように作業する
    • プロファイルの下の extensions ディレクトリを開く。extensions は下記パスに存在する。[] で囲まれた部分は環境によって変わるので、適宜確認。
C:\Documents and Settings\[ユーザ名]\Application Data\Mozilla\Firefox\Profiles\[適当な文字列].default\extensions
    • このディレクトリに拡張機能の ID の名前でテキストファイルを作成する。この場合は "{9AA46F4F-4DC7-4c06-97AF-5035170633FE}" というファイルを作成する。{} の含めて必要＆拡張子不要なので注意。
    • ファイル "{9AA46F4F-4DC7-4c06-97AF-5035170633FE}" に次の一行を記述。これで firefox が作業ディレクトリを参照しに行くようになる
c:\works\firefox\helloworld
  • 参考：なお、ここでは ID をサンプルのまま変更せずに使ったが、実際に拡張を開発して配布する場合には専用のID(GUID : 世界全体で重複しない一意の値)を指定する必要がある。
    • firefox 拡張の ID は UUID を用いる方法と、"識別子@ドメイン名" を用いる方法が認められている*1

拡張機能の動作確認

以上によりサンプル拡張機能が動作するところまで進んだので、動作確認しておこう。

  • firefox を起動（すでに起動していたら一度全ての firefox を終了させる）
    • 初回起動時に設置したサンプル拡張機能は、install.rdf の記述に従って自動的に firefox に組み込まれる。この際、chrome.manifest も生成される（後述）
  • メニューバーの「ツール」をクリックして、「Hello, World!」が追加されているのを確認
  • 「Hello, World!」を選ぶと、ダイアログボックスに「Hello, World!」と表示されるのを確認

動作確認が済んだら、firefox を終了しておく。

ソースを展開して改変できる状態にする

firefox へ組み込まれた際に、作業ディレクトリ ( c:\works\firefox\helloworld ) に chrome.manifest というファイルが自動的に生成されている。
これは chrome ( firefox において各種リソースを指す言葉) のありかを示すものなので、サンプルを改変できるように chrome を展開しつつ、chrome.manifest の記述も調整する

  • chrome/helloworld.jar の展開
    • サンプル拡張機能のリソース（コード含む）は chrome/helloworld.jar に含まれているので、これを展開する。helloworld.jar も zip ファイルなので、unzip で展開できる
cd chrome
unzip helloworld.jar
    • 以下のファイルが展開される
content/helloworld/about.xul
content/helloworld/contents.rdf
content/helloworld/helloworldOverlay.js
content/helloworld/helloworldOverlay.xul
skin/classic/helloworld/contents.rdf
skin/classic/helloworld/helloworld.png
skin/classic/helloworld/helloworldb.png
  • chrome.manifest を調整する
    • firefox により生成された chrome.manifest の中身は次のようになっているはずである。
overlay	chrome://browser/content/browser.xul	chrome://helloworld/content/helloworldOverlay.xul
overlay	chrome://navigator/content/navigator.xul	chrome://helloworld/content/helloworldOverlay.xul
content	helloworld	jar:chrome/helloworld.jar!/content/helloworld/
skin	helloworld	classic/1.0	jar:chrome/helloworld.jar!/skin/classic/helloworld/
    • このうち content と skin の行を以下のように書き換える（ jar ではなく直接参照するように）
overlay	chrome://browser/content/browser.xul	chrome://helloworld/content/helloworldOverlay.xul
overlay	chrome://navigator/content/navigator.xul	chrome://helloworld/content/helloworldOverlay.xul
content	helloworld	chrome/content/helloworld/
skin	helloworld	classic/1.0	chrome/skin/classic/helloworld/

拡張機能の動作を変更してみる

ここまで拡張機能を改変できるようになったので、実際に表示されるメッセージを書き換えてみる。

  • 一度 firefox を起動して動作確認しておく
  • ダイアログを表示する実際のコードは c:\works\firefox\helloworld\chrome\content\helloworld\helloworldOverlay.js に記述されている
function hello() {
	alert("Hello, world!");
}
  • 表示メッセージを適当に書き換えてみる。
function hello() {
	alert("Hello, Firefox!");
}
  • firefox を一度終了して、起動
  • 「ツール」＞「 Hello, World! 」を選んで、表示されるメッセージが変わっていることを確認

*1:パッケージ手順を解説する記事を書く機会があれば、ちゃんと説明する……かもしれない。