小粋空間  -  a cheap joke and a play on words site

Thunderbirdアドオンの作り方（その3：コンテントプロバイダ - XUL）

Thunderbirdアドオンの作り方について解説します。その3はコンテントプロバイダのXULです。

サンプルでは1つのXULファイルを提供しているので、サンプルを使ってファイルの設定内容について解説します。

サンプルは「その1」からダウンロードできます。

１．XULとは

XUL（ズール：XML User Interface Language）とは「ユーザインタフェースを記述するための言語」です。

サンプルのXULは次のようになっています。

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://test/skin/test.css" type="text/css"?>
<!DOCTYPE overlay SYSTEM "chrome://test/locale/menu.dtd">
<overlay id="sample" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
  <toolbar id="mail-bar3">
    <toolbarbutton id="button-new-reply" label="&test.label;" class="toolbarbutton-1" tooltiptext="Reply but new" position="3" removable="true" oncommand="foo(this)" />
  </toolbar>
  <script type="application/x-javascript" src="test.js" />
</overlay>

ごちゃっとしていて分かりにくいですが、キモとなる部分は下記の4行です。

  <toolbar id="mail-bar3">
    <toolbarbutton id="button-new-reply" label="&test.label;" class="toolbarbutton-1" tooltiptext="Reply but new" position="3" removable="true" oncommand="foo(this)" />
  </toolbar>
  <script type="application/x-javascript" src="test.js" />

この部分でThunderbirdにボタンを表示します。

HTMLを知っている方であればとっつきやすいのではないかと思います。

それでは各要素について解説します。

１．XML宣言

XULはXMLなので、1行目にXML宣言を記載します。

<?xml version="1.0"?>

２．xml-stylesheet宣言

コンテントプロバイダで利用するスタイルシートを設定します。スタイルの設定が必要なければこの行は不要です。

<?xml-stylesheet href="chrome://test/skin/test.css" type="text/css"?>

href属性は"chrome://test/skin/test.css"となっていて、拡張機能のディレクトリ構造に示す、

test@hoge.com
├chrome
│ ├ skin
│ │ ├ test.css★

を指していますが、パスそのものを指定している訳ではなく、

• test：chrome.manifestに記述したパッケージ名（どのプロバイダのパッケージかはこの時点では不明）
• skin：スキンプロバイダ

の2つによって、chrome.manifestの

skin test classic/1.0 chrome/skin/

を参照し、href属性の"test/skin"の部分を"chrome/skin/"に変換します。

つまり、

chrome://test/skin/test.css

は

chrome/skin/test.css

を指していることが分かります。

３．DOCTYPE宣言

ロケールを設定します。ロケールの設定が必要なければこの行は不要です。

<!DOCTYPE overlay SYSTEM "chrome://test/locale/menu.dtd">

"chrome://test/locale/menu.dtd"の部分はさきほどのスキンプロバイダと同様、

• test：test.manifestに記述したパッケージ名（どのプロバイダのパッケージかはこの時点では不明）
• locale：ロケールプロバイダ

ですが、ユーザーに最適なローカライズ（ここでは日本語）を行うので、

test.manifest

locale test ja locale/ja/

が読み込まれ、"test/locale"の部分を"locale/ja/"に変換します（1階層上の"chrome"はchrome.manifestから継承）。

つまり、

chrome://test/locale/menu.dtd

は

chrome/locale/ja/menu.dtd

を指していることが分かります。

４．overlay要素

その2：chrome.manifestで解説したとおり、コンテントプロバイダは「既存のXULにオーバーレイする」ということなので、オーバーレイしたい内容をこの要素で括ります。

<overlay id="sample" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
　：
</overlay>

id属性は任意の値、xmlns属性は固定値らしいので、ここに記載された内容をそのまま利用します。

５．toolbar要素

toolbar要素は、Thunderbirdの「受信」「作成」「返信」などのメニューが並んでいるツールバーを指します。

６．toolbarbutton要素

toolbarbutton要素はツールバーの中のボタンを指します。

各属性の意味は次のとおりです。

• id：任意のid属性値
• label：ボタン表示のテキスト（&やセミコロンの意味は別途）
• class：任意のclass属性値
• tooltiptext：ツールチップ
• removable：カスタマイズ可否（true:可／false:不可）
• oncommand：ボタンクリック時に起動する関数

７．script要素

oncommand属性で起動する関数やイベントハンドラなど、動作させるJavaScriptファイルをここに記述します。

  <script type="application/x-javascript" src="test.js" />

８．要素を探す方法

サンプルではツールバーの要素がtoolbarやtoolbarbuttonと分かっている状態で説明しましたが、そもそも機能追加したい部分の要素がわからないと開発できません。

要素を知るには、DOM InspectorとInspectorWidgetをペアで利用することをおすすめします（詳細は割愛）。

• DOM Inspector
• InspectorWidget

あるいは、開発したい部分の他の拡張機能をダウンロードして解析する手もあるでしょう。

ちなみにステータスバーは次のようなXULになります。

<statusbar id="status-bar">
    <statusbarpanel id="my-panel" label="Date"/>
</statusbar>

メニューバーは次のようなXULになります。

<menubar id="mail-menubar">
    <menu label="foo">
        <menupopup id="foo-popup">
            <menuitem label="aaa"/>
            <menuitem label="bbb"/>
            <menuitem label="ccc"/>
        </menupopup>
    </menu>
</menubar>