Open MagicVox.net
Mozilla Thunderbird にアドオンから小指が掛かったので、更に作業を進めましょう。とりあえずの方針として、見た目も判りやすいユーザ インタフェースを拡張するアドオンを開発することにして、このエントリでは、Mozilla Thunderbird のウィンドゥにアドオンで独自のユーザ インタフェース要素を追加するところまでを説明します。
Mozilla Thunderbird 用アドオン開発を始めるための開発環境の準備から、公式サイトで配布するために、少なくとも英語で多言語化するまでの手順を解説しています。
既存のユーザ インタフェースなどに被せる(overlay する)カタチで、独自の UI などを追加する仕組みを使います。他に "override" というのがあるんですが、こちらはおそらく全て置き換えてしまう(override する)感じだと思います(使ったことがないので)
ここでは、「○○を my.xul で overlay しますよ」と宣言するための chrome.manifest と、被せる内容を書いた my.xul の 2 つのファイルを作成します。これらのファイルの配置は次のとおりです。
\{DEV_DIR}
+- index.rdf
+- chrome.manifest
+- \chrome
+- \content
+- my.xul
content hoge chrome/content/ overlay chrome://messenger/content/messenger.xul chrome://hoge/content/my.xul
hoge の部分が宣言された名前空間で、他のアドオンと被らないようにします。chrome://messenger/content/messenger.xul は、雷鳥のメイン ウィンドゥの XUL で、それに chrome://hoge/content/my.xul の内容を overlay する、ということ。hoge は 1 行目で宣言したこのアドオンの名前空間で、content にある my.xul という意味。
<overlay id="sample"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<statusbar id="status-bar">
<button label="Press Me" />
</statusbar>
</overlay>
DOM Inspector を利用して、雷鳥のメイン ウィンドゥを覗いてみると、ステータスバーの ID が status-bar であることが判ります。そこで、ステータスバーに overlay して、独自のプッシュ ボタンを追加する例です(Fig.1 )。
<overlay id="sample"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<menubar id="mail-menubar">
<menu label="MyMenu">
<menupopup id="file-popup2">
<menuitem label="New"/>
<menuitem label="Open"/>
<menuitem label="Save"/>
<menuseparator/>
<menuitem label="Exit"/>
</menupopup>
</menu>
</menubar>
</overlay>
DOM Inspector を利用して、雷鳥のメイン ウィンドゥを覗いてみると、ウィンドゥ メニューの ID が であることが判ります。そこで、既存のウィンドゥ メニューに overlay して、独自のメニュー項目を追加する例です(Fig.2 )。
<overlay id="sample"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<menubar id="mail-menubar">
<button label="Press Me" position="3" />
</menubar>
</overlay>
例2.と殆ど同じですが、メニュー項目ではなく、ウィンドゥ メニューにプッシュボタンを追加してみます。しかも、position 属性を指定して、変な位置にプッシュボタンが追加されるようになっています(Fig.3 )。
DOM Inspector を使って任意の要素の ID が判れば、そこを狙って独自要素を追加できるようになりました。しかし、まだ動作に関するコードを書いていないので、クリックしても何も起きません。それでも、ユーザ インタフェース要素を追加するところまでできたので、後は察しのとおり、要素ごとに AddEventListener などでクリックされた際に希望の動作をするようにすれば、ほぼ完成です。ね、簡単でしょう？
English