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

Thunderbirdアドオンの作り方（その4：JavaScript）

Thunderbirdアドオンの作り方について解説します。その4はJavaScriptです。

これまでと同様、サンプルを使ってファイルの設定内容について解説します。

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

１．サンプル

test.jsに次の3行を追加します。

function foo(event) {
    alert("OK");
}

表示されたボタンをクリックすると、JavaScriptのalertが表示されます。

このように、ブラウザと似たような感覚でJavaScriptを動作させることができます。

２．サンプル2（ステータスバーに時計を表示）

もうひとつ、公式サイトのサンプル（ステータスバーに時計を表示）を使って解説します。

Building a Thunderbird extension 6: Adding JavaScript

サンプルのtest.xulのoverlay要素を下記の赤色に書き替えます。

<overlay id="sample" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
  <statusbar id="status-bar">
    <statusbarpanel id="my-panel" label="Date"/>
  </statusbar>
  <script type="application/x-javascript" src="test.js" />
</overlay>

赤色の3行はステータスバーへの追加を行います。

そしてサンプルのtest.jsに下記を追加します。

window.addEventListener("load", function(e) { 
    startup(); 
}, false);
 
window.setInterval(
    function() {
        startup(); 
    }, 1000);
 
function startup() {
    var myPanel = document.getElementById("my-panel");
    var date = new Date();
    var day = date.getDay();
    var dateString = date.getFullYear() + "." + (date.getMonth()+1) + "." + date.getDate() + " " + ('0' + date.getHours()).slice(-2) + ":" + ('0' + date.getMinutes()).slice(-2) + ":" + ('0' + date.getSeconds()).slice(-2);
    myPanel.label = "Date: " + dateString;
}

"window.addEventListener()"はThunderbirdが立ち上がった時点で起動されるイベントハンドラです。

イベントハンドラが起動されることによってstartup()を起動し、現在時刻を取得して表示します。

そのあとはwindow.setIntervalで1000ms周期でstartup()を起動し、時刻を更新します。

これでThunderbirdを再起動すれば、ステータスバーに時計を表示します。

３．その他

Thunderbird上でJavaScriptを動かす感覚は上記のサンプルでお分かりになったと思います。

が、実践的な拡張機能の実装について、これだけの情報では不十分だと思いますので、Thunderbird拡張機能の実装について参考になりそうな情報があれば別記事で紹介したいと思います。