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 再起動だけで反映）となっている。
なお、ここにまとめたのは本当に「開発とっかかり」であり、サンプルプログラムに対してコードを書き換え、動作に反映されるのを確認するところまでになっている。
なので、実際に開発を進めるために必要な知識や、パッケージ作成手順などは含まれていない。あしからず。
用意するもの
- Firefox 2.0.1
- Firefox 1.5 以降であればおそらく同じ手順で大丈夫
- zip アーカイブを展開するツール
- 手順では unzip を使って説明するが、もちろん別のツールでも構わない
- helloworld.xpi ( 拡張機能サンプル : Hello World )
- http://extensions.roachfiend.com/helloworld.xpi をダウンロード
- 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 を書き換える
<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>
<em:id>{9AA46F4F-4DC7-4c06-97AF-5035170633FE}</em:id>
C:\Documents and Settings\[ユーザ名]\Application Data\Mozilla\Firefox\Profiles\[適当な文字列].default\extensions
c:\works\firefox\helloworld
拡張機能の動作確認
以上によりサンプル拡張機能が動作するところまで進んだので、動作確認しておこう。
- firefox を起動（すでに起動していたら一度全ての firefox を終了させる）
- メニューバーの「ツール」をクリックして、「Hello, World!」が追加されているのを確認
- 「Hello, World!」を選ぶと、ダイアログボックスに「Hello, World!」と表示されるのを確認
動作確認が済んだら、firefox を終了しておく。
ソースを展開して改変できる状態にする
firefox へ組み込まれた際に、作業ディレクトリ ( c:\works\firefox\helloworld ) に chrome.manifest というファイルが自動的に生成されている。
これは chrome ( firefox において各種リソースを指す言葉) のありかを示すものなので、サンプルを改変できるように chrome を展開しつつ、chrome.manifest の記述も調整する
- chrome/helloworld.jar の展開
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
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:パッケージ手順を解説する記事を書く機会があれば、ちゃんと説明する……かもしれない。
