それでは実際に作りましょう。まず、何を作るかを決めます。最初はシンプルなものから始めることにします。
「ショートカットキーを押すと特定のページを開く」という拡張機能を作ってみましょう。それをメニューにも登録することにします。Firefoxでは、[Alt]キーと[Home]キーを同時に押すとホームページが開くショートカットキーがありますが、今回作成するのは自分で開くページやショートカットキーを定義できるものです。
それだけではあまりおもしろくありませんので、土曜日には開くページを変える機能を入れることにします。出来上がりのイメージは下の図のようになります。また完成したファイルは以下のリンクからダウンロードできます。
 |
拡張機能の出来上がりイメージ。メニューに項目を追加し、それを選択するかショートカットキーを押すことで新しいタブが開きページが読み込まれる |
次に開発に必要なものをそろえます。とはいっても特別な開発ツールが必要なわけではありません。使いなれたテキストエディタがあればそれで十分です。親切な「拡張機能開発用統合開発ツール」などというものはありません。この辺りに少し難しいと感じる人がいるかもしれません。
使うパソコンの種類は問いません。Firefoxが動作すれば、WindowsでもMacでもLinuxでも大丈夫です。では、実際に拡張機能を構成するファイルを作っていきましょう。
まず、拡張機能に関係するファイルを格納するフォルダを作ります。ここでは「sample001」という名前にしました。
 |
拡張機能に関係するファイルを格納するフォルダを「sample001」という名前で作ります |
次にこのフォルダの中に「install.rdf」というファイルを作ります。このファイルはXMLファイルで、ファイルの中身は以下のようになります。メモ帳などテキストエディタを使って中身を記述します。
install.rdfの内容
001:<?xml version="1.0"?>
002: <RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
003: xmlns:em="http://www.mozilla.org/2004/em-rdf#">
004:
005: <Description about="urn:mozilla:install-manifest">
006: <em:id>{04d2bb32-d7c0-4ee8-a5b9-f70798dda4f0}</em:id>
007: <em:name>Sample Extension 001</em:name>
008: <em:version>1.0</em:version>
009: <em:description>A sample extension 001</em:description>
010: <em:creator>Jun Oura</em:creator>
011: <em:type>2</em:type>
012: <em:file>
013: <Description about="urn:mozilla:extension:file:sample001.jar">
014: <em:package>content/</em:package>
015: </Description>
016: </em:file>
017: <em:targetApplication>
018: <Description>
019: <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
020: <em:minVersion>1.0</em:minVersion>
021: <em:maxVersion>2.0+</em:maxVersion>
022: </Description>
023: </em:targetApplication>
024: </Description>
025: </RDF>
最初の5行はこのファイルを書くときの決まり文句です。6行目は拡張機能を区別するためのIDを付けています。GUID(Global Unique Identity:同じ値が2つ無いユニークな値)に従ったランダムな数を付けてください。7行目から10行目は拡張機能の説明です。名称、バージョン、説明、作者を記述します。今回は拡張機能を作りますので、11行目には2を指定します。13行目、14行目には実際のファイルの名前を指定します。後ほどこのファイルを作成します。18行目、19行目も決まり文句のようなものです。20行目、21行目には対応するFirefoxのバージョンを指定します。3.0に対応させるにはmaxversionを「2.0+」から「3.0+」にします。
次に同じsample001フォルダ内に「chrome」というフォルダを作ります。
 |
chromeフォルダの作成 |
さらに「chrome」の中に「content」というフォルダを作ります。
 |
「chrome」の中に「content」というフォルダを作ります |
この「content」フォルダの中に、以下の3つのファイルを作ります。漢字など日本語文字を使う場合はエンコードをUTF-8にしてください。
- contents.rdf
- sample001.js
- sample001.xul
 |
「content」の中に3つのファイルを配置 |
ファイルの内容は以下の通りです。
contents.rdf
001:<?xml version="1.0"?>
002: <RDF:RDF xmlns:RDF="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
003: xmlns:chrome="http://www.mozilla.org/rdf/chrome#">
004:
005: <RDF:Seq about="urn:mozilla:package:root">
006: <RDF:li resource="urn:mozilla:package:sample001"/>
007: </RDF:Seq>
008: <RDF:Description about="urn:mozilla:package:sample001"
009: chrome:displayName="sample001"
010: chrome:author="Jun Oura"
011: chrome:name="sample001"
012: chrome:extension="true"
013: chrome:description="sample001">
014: </RDF:Description>
015:
016: <RDF:Seq about="urn:mozilla:overlays">
017: <RDF:li resource="chrome://browser/content/browser.xul"/>
018: </RDF:Seq>
019:
020: <RDF:Seq about="chrome://browser/content/browser.xul">
021: <RDF:li>chrome://sample001/content/sample001.xul</RDF:li>
022: </RDF:Seq>
023:
024:</RDF:RDF>
sample001.js
001:function sample001(){
002: dtm=new Date();
003: ww = dtm.getDay();
004:
005: alert("新しいタブを開きます");
006:
007: if(ww == 6){ //土曜日ならば
008: openNewTabWith('http://eiga.com/');
009: }else{
010: openNewTabWith('http://www.yahoo.co.jp/');
011: }
012:}
sample001.jsが実際のロジックを記述するファイルです。ここではsample001という関数を定義して、「新しいタブを開きます」というダイアログウィンドウを出して、曜日に応じてタブを開いてページを読み込むという処理を記述しています。「alert」や「openNewTabWith」は Firefoxが提供している関数ですが、文法などはJavascriptそのままなので、理解しやすいと思います。土曜日ならば、eiga.comを開き、それ以外の曜日の場合は、Yahoo!を開きます。
sample001.xul
001:<?xml version="1.0"?>
002:
003:<overlay id="sample001"
004: xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
005:
006:<script type="application/x-javascript" src="chrome://sample001/content/sample001.js">
007:</script>
008:
009:<keyset id="mainKeyset">
010: <key id="sample001" modifiers="alt" key="N" oncommand="sample001();"/>
011:</keyset>
012:
013:<menupopup id="menu_ToolsPopup">
014: <menuitem id="sample001" label="Open My Page" key="sample001" oncommand="sample001();"/>
015:</menupopup>
016:
017:</overlay>
sample001.xulはユーザインターフェイスを定義しています。6行目ではJavascriptファイルとの関連を宣言します。9から11行目ではショートカットキーを、13から15行目ではメニューを定義しています。
ショートカットキーの定義部分では[alt]キーと[N]キーを押すことで「sample001」という関数を実行することを、メニューの部分では、「Open My Pane」というメニュー項目を追加し、それが選択されたらやはり「sample001」という関数を実行することを記述しています。これでファイルは完成です。
