動作の追加

　前回作成したステータスバーにボタンを追加する my.xulをベースに、ボタンが押されると、ボタンのラベルが変化するようにしてみます。

<overlay id="sample" 
        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
    <statusbar id="status-bar">
        <button label="Press Me" oncommand="MyCommand(this)"/>
    </statusbar>

    <script type="application/x-javascript"><![CDATA[
function MyCommand( me ) {
    me.label = 'Hello, Thunderbird addon.';
}
    ]]></script>
</overlay>

4 行目

　button 要素に oncommand プロパティを指定して、選択されたときの動作を追加します。

7～11 行目

　XUL ファイルの中に JavaScript を記述しています。

9 行目

　オブジェクトの label プロパティを書き換えています。利用可能なメソッドやプロパティは XUL Reference で調べられます。

JavaScript を別ファイルにする

　ここでは、JavaScript コードをオーバーレイする同じ XUL ファイル内に書きましたが、別ファイルとして管理した方が何かと便利です^*1。この場合、script 要素の src プロパティでファイル名を指定するだけです。

\{DEV_DIR}
+- index.rdf
+- chrome.manifest
+- \chrome
   +- \content
      +- my.xul
      +- my.js

<overlay id="sample" 
        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
    <statusbar id="status-bar">
        <button label="Press Me" oncommand="MyCommand(this)"/>
    </statusbar>

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

function MyCommand( me ) {
    me.label = 'Hello, Thunderbird addon.';
}

デバッグ メッセージの出力

　XUL や JavaScript の構文エラーなどは起動時にエラーコンソールに表示されます。また、JavaScript の動的エラーについては、その動作時にエラーコンソールに表示されます。また、デバッグ用に任意のタイミングでメッセージを表示するには幾つか方法があります。

エラーコンソールの"エラー"タブに出力する

function MyCommand( me ) {
    Components.utils.reportError( 'Some messages' );
}

エラーコンソールの"メッセージ"タブに出力する

function MyCommand( me ) {
    var consoleService = Components.
            classes["@mozilla.org/consoleservice;1"].
            getService( Components.interfaces.nsIConsoleService );
    consoleService.logStringMessage( 'Some messages' );
}

コンソールに出力する(Windows 環境のみ)

　最初に開発環境を準備する際に、browser.dom.window.dump.enabled 環境変数を設定しましたが、JavaScript 内で dump() してみても、何か出力されている気配もありません。
　dump() メソッドによる出力を確認するには、雷鳥の起動オプションに -console パラメータを付けて起動し、コンソール ウィンドゥを表示する必要があります。dump() メソッドによる出力は、エラーコンソールではなく、こちらのコンソール ウィンドゥに出力されるので注意が必要です。

function MyCommand( me ) {
    // 明示的に改行する必要があります
    dump( "Some messages\n" );
    // タブ文字も使えます
    window.dump( "\tSome messages" );
}

デバッグに便利な起動オプション

　コンソール ウィンドゥの表示方法を調べている際に、開発用雷鳥の起動ショートカットに指定しておくと便利と思われる起動オプションを幾つか見つけました。

• -console ... 起動と同時にコンソール ウィンドゥを開きます。雷鳥を再起動する時は、コンソール ウィンドゥを閉じれば、エラー コンソールや DOM Inspector なども一括で閉じるので便利です^*2。
• -jsconsole ... 起動と同時にエラー コンソールを開きます。
• -inspector ... DOM Inspector アドオンがインストールされている場合、起動と同時に DOM Inspector を開きます。