Mozilla Thunderbird にアドオンからユーザ インターフェース要素を追加できたので、次はこの要素が押されたり選択されたときに、何等かのアクションをするようにします。この部分は JavaScript で書けば良く、実質はダイナミック HTML のようなものなので、それほど難しいものではありません。ひとまずこの段階まで来れば、雷鳥に何等かの動作を追加するアドオンを一通り作成できるようになります。
前回作成したステータスバーにボタンを追加する 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>
button
要素に oncommand
プロパティを指定して、選択されたときの動作を追加します。
ここでは、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' ); }
最初に開発環境を準備する際に、browser.dom.window.dump.enabled 環境変数を設定しましたが、JavaScript 内で dump()
してみても、何か出力されている気配もありません。
dump()
メソッドによる出力を確認するには、雷鳥の起動オプションに -console
パラメータを付けて起動し、コンソール ウィンドゥを表示する必要があります。dump()
メソッドによる出力は、エラーコンソールではなく、こちらのコンソール ウィンドゥに出力されるので注意が必要です。
function MyCommand( me ) { // 明示的に改行する必要があります dump( "Some messages\n" ); // タブ文字も使えます window.dump( "\tSome messages" ); }
コンソール ウィンドゥの表示方法を調べている際に、開発用雷鳥の起動ショートカットに指定しておくと便利と思われる起動オプションを幾つか見つけました。