これで静的なオーバーレイができました。次に XPI パッケージを作成します。XPI パッケージによって、拡張機能は動的オーバーレイとして Mozilla にインストールされます。XPI は UI レイヤーを別々に切り分けることができるように設計されています。まず、XPI に含めるファイルを入れるディレクトリを作ります。次に、ファイル中の URL を変更して、XPI を使ってインストールしたときにファイルが置かれる場所を指すようにします。次に、tinderstatus コンポーネントについて記述した contents.rdf
と、インストールを実行する install.js
スクリプトを作成します。最後に、構成ファイルを zip アーカイブへ圧縮します。
まず、適当な場所に tinderstatus-installer
ディレクトリを作成します。次に tinderstatus
サブディレクトリをその中に作成し、さらにその中に content
サブ-サブディレクトリを作成してください。作成したら、次のファイルを content
ディレクトリにコピーしてください。
- tinderstatusOverlay.xul
- tinderstatus.js
- tinderstatus.css
- tb-busted.png
- tb-nostatus.png
- tb-success.png
- tb-testfailed.png
これらは XPI に入れるファイルです。次に、コピーした tinderstatusOverlay.xul
中の URL を、XPI を使ってインストールしたときにファイルが置かれる場所を指すように変更します。
<?xml version="1.0"?> <?xml-stylesheet href="chrome://tinderstatus/content/tinderstatus.css" type="text/css"?> <overlay id="tinderstatusOverlay" xmlns="https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/x-javascript" src="chrome://tinderstatus/content/tinderstatus.js" /> <statusbar id="status-bar"> <statusbarpanel class="statusbarpanel-iconic" id="tinderbox-status" insertbefore="offline-status" status="none"/> </statusbar> </overlay>
tinderstatus.css
も同様に URL を変更します。
statusbarpanel#tinderbox-status { list-style-image: url("chrome://tinderstatus/content/tb-nostatus.png"); } statusbarpanel#tinderbox-status[status="success"] { list-style-image: url("chrome://tinderstatus/content/tb-success.png"); } statusbarpanel#tinderbox-status[status="testfailed"] { list-style-image: url("chrome://tinderstatus/content/tb-testfailed.png"); } statusbarpanel#tinderbox-status[status="busted"] { list-style-image: url("chrome://tinderstatus/content/tb-busted.png"); }
次に、2 つのファイルを作成します。1 つは contents.rdf
という名前で、インストールするコンポーネントの情報が記述されており、chrome レジストリにインストールされます。もう 1 つは install.js
という名前で、コンポーネントをインストールするためのコードです。contents.rdf
は content
ディレクトリに入れます。
<?xml version="1.0"?> <RDF:RDF xmlns:RDF="https://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:chrome="https://www.mozilla.org/rdf/chrome#"> <RDF:Seq about="urn:mozilla:package:root"> <RDF:li resource="urn:mozilla:package:tinderstatus"/> </RDF:Seq> <RDF:Description about="urn:mozilla:package:tinderstatus" chrome:displayName="Mozilla Tinderstatus Extension" chrome:author="Myk Melez" chrome:name="tinderstatus" chrome:extension="true" chrome:description="Displays tinderbox status for the Mozilla codebase."> </RDF:Description> <RDF:Seq about="urn:mozilla:overlays"> <RDF:li resource="chrome://navigator/content/navigator.xul"/> </RDF:Seq> <RDF:Seq about="chrome://navigator/content/navigator.xul"> <RDF:li>chrome://tinderstatus/content/tinderstatusOverlay.xul</RDF:li> </RDF:Seq> </RDF:RDF>
install.js
は tinderstatus-installer
ディレクトリに入れます。
initInstall( "Mozilla Tinderstatus Extension", "/mozdev/tinderstatus", "0.1"); var installDir = getFolder("Chrome","tinderstatus"); setPackageFolder(installDir); addDirectory("tinderstatus"); registerChrome( CONTENT | DELAYED_CHROME, getFolder(installDir, "content")); var result = performInstall(); if ( result != SUCCESS ) cancelInstall(result);
すべてのファイルの配置が終わったら、tinderstatus-installer
ディレクトリで zip を使い、install.js
と tinderstatus/
ディレクトリの内容をすべて含んだ ZIP アーカイブを作り、その名前を tinderstatus.xpi
にします。アーカイブのトップレベルにファイルとディレクトリがあることを確かめてください。