Thunderbirdアドオンの作り方(その3:コンテントプロバイダ - XUL)

Thunderbirdアドオンの作り方(その3:コンテントプロバイダ - XUL)

Posted at February 6,2018 12:03 AM
Tag:[Thunderbird]

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

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

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

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を知っている方であればとっつきやすいのではないかと思います。

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

1.XML宣言

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

<?xml version="1.0"?>

2.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

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

3.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

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

4.overlay要素

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

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

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

5.toolbar要素

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

6.toolbarbutton要素

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

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

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

7.script要素

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

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

8.要素を探す方法

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

要素を知るには、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>
関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)