Firefox 改め Thunderbird Addon 作成(その2)
前回はとりあえずインストールまでをまとめました．
今回は下のようにボタンを追加するところぐらいまでをまとめておこうかとおもいます．
左の画面がアドオンなしの場合，右の画像がアドオンありの場合．
右の画像には "Click Here" というボタンが追加されていますが，今回はこれを追加する手順を備忘録としてまとめておきます．
ちなみに，浮気性のせいで今回は Thunderbird をいじってます（ぉぃ．
Thunderbird をいじる手順も前回とほとんど同じです．
# 違いは，プロフィールの保存場所が $HOME/.mozilla-thunderbid であることや，入力するコマンドが firefox ではなく，thunderbid であることぐらいでしょうか．
-
DOM Inspector のインストール
これがないとほんとに始まらないのでインストールします．
-
修正箇所の把握
DOM Inspector を用いて，インタフェースのどこを修正すればいいかを確認します．
今回は，Thunderbird で個別メッセージの表示画面をいじることに決めたので，その中を探します．
具体的には，
- Thunderbird の起動
- 適当に届いているメールをダブルクリックして個別メッセージの表示画面を出す(上図の左側の画面を出す)
- DOM Inspector をメニューの「ツール」から起動
- DOM Inspector の "File" -> "Inspect a Window" から個別メッセージの表示画面を選択
します．
これが終わると，
こんな画面が出てくるはずです．
今回 "Click Here" ボタンを追加したいのはメールのヘッダ表示部分なので，DOM Inspector の中を適当に見ていくと，nodeName:hbox, id:expandedHeaderView というのが見つかります．
なんとなくこのあたりだな，という当たりをつけておきます．
-
chrome.manifest の作成
今回いじるのは，DOM Inspector の結果から chrome://messenger/content/messageWindow.xul だと分かるので
$ vi $HOME/Mozilla/testdev
content testdev content/
overlay chrome://messenger/content/messageWindow.xul chrome://testdev/content/overlay.xul
と書きます．
そして，この後いよいよ，overlay.xul をいじります．
$ mkdir $HOME/Mozilla/testdev/content
$ cd $HOME/Mozilla/testdev/content
$ vi overlay.xul
<?xml version="1.0"?>
<overlay xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script type="application/x-javascript" src="chrome://testdev/content/overlay.js" />
<overlay>
今回は中身をイベントなどをいろいろ足すことを考えて，overlay.js という Javascript を別途読みこませることにしました．
大事なのは赤字の部分です．(青字の部分はおまじない)
で，その中身はこんな感じ．
$ vi overlay.js
var alreadyArrangedDOM = false;
function arrangedDOM(){
if(alreadyArrangedDOM) return;
alreadyArrangedDOM = true;
var moetoraBox = document.createElement("vbox");
moetoraBox.setAttribute("id", "moetoraBox");
var widget = document.getElementById("expandedHeaderView");
widget.appendChild(moetoraBox);
var moetoraStartButton = document.createElement("button");
moetoraStartButton.setAttribute("id", "moetoraButton");
moetoraStartButton.setAttribute("label", "Click Here");
moetoraStartButton.addEventListener('click', buttonPressed, true);
moetoraBox.appendChild(moetoraStartButton);
}
function buttonPressed(){
alert('Button was pressed!');
}
// messagepane にボタンを追加する
var messagepane = document.getElementById("messagepane");
messagepane.addEventListener("load", arrangedDOM, true);
メッセージ表示画面が load されると，arrangedDOM が呼ばれます．(最後の2行)
arrangedDOM の青字の部分では，DOM(Document Object Model)を JavaScript でいじってます．
上で確認した expandedHeaderView を getElementById で探して，その子ノードとして moetoraBox という ID の vbox エレメントを追加しています．
vbox は Vertical Box の略の様で，ある領域(親ノードの領域)を縦に分けたうちの一つになります(左下図参照)．
ちなみに，hbox にすると，横に分けたうちの一つになります(右下図参照)．
# この図では，各 Box は同じ大きさにしてますが，vbox であれば横幅，hbox であれば縦幅が，中に含まれる要素によって変わってきます．
# 要は，vbox に長々とテキストを書いてもそれなりに調整してくれるっぽということ．
arrangedDOM の赤字の部分では，青字の部分で足した vbox 領域である moetoraBox に，button エレメントである moetoraButton を追加してます．
そして，addEventListener メソッドを使って，ボタンをクリックした際の動作を規定しています．
ここでは，buttonPressed を呼び出すようにしていて，それは下で定義されています．
今回の例では，alert() を使って警告画面を出すに止めていますが，ここを工夫してあげると割となんでもできそうです．
[RSS 配信中]