カスタマイズFirefox - Firefoxの拡張機能を作ろう

それでは実際に作りましょう。まず、何を作るかを決めます。最初はシンプルなものから始めることにします。

「ショートカットキーを押すと特定のページを開く」という拡張機能を作ってみましょう。それをメニューにも登録することにします。Firefoxでは、[Alt]キーと[Home]キーを同時に押すとホームページが開くショートカットキーがありますが、今回作成するのは自分で開くページやショートカットキーを定義できるものです。

それだけではあまりおもしろくありませんので、土曜日には開くページを変える機能を入れることにします。出来上がりのイメージは下の図のようになります。また完成したファイルは以下のリンクからダウンロードできます。

次に開発に必要なものをそろえます。とはいっても特別な開発ツールが必要なわけではありません。使いなれたテキストエディタがあればそれで十分です。親切な「拡張機能開発用統合開発ツール」などというものはありません。この辺りに少し難しいと感じる人がいるかもしれません。

使うパソコンの種類は問いません。Firefoxが動作すれば、WindowsでもMacでもLinuxでも大丈夫です。では、実際に拡張機能を構成するファイルを作っていきましょう。

まず、拡張機能に関係するファイルを格納するフォルダを作ります。ここでは「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」の中に「content」というフォルダを作ります。

この「content」フォルダの中に、以下の3つのファイルを作ります。漢字など日本語文字を使う場合はエンコードをUTF-8にしてください。

• contents.rdf
• sample001.js
• sample001.xul

ファイルの内容は以下の通りです。

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」という関数を実行することを記述しています。これでファイルは完成です。