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
などでクリックされた際に希望の動作をするようにすれば、ほぼ完成です。ね、簡単でしょう?