Making it into a dynamic overlay and packaging it up for distribution

これで静的なオーバーレイができました。次に 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 にします。アーカイブのトップレベルにファイルとディレクトリがあることを確かめてください。