E4Xを使ってXULにoverlayするサンプルコード

某有名Firefox拡張機能配布サイトのブログを見て、やっとやり方が分かったのでここにサンプルコードを簡単な解説を書いておきます。

サンプルコード

ステータスバーのポップアップブロックアイコンの横に新しいstatusbarpanelを追加する為のサンプルコードです。

var range = document.createRange();
range.selectNodeContents(document.getElementById('status-bar'));
range.collapse(false);
range.extractContents();
range.setStartAfter(document.getElementById("page-report-button"));
range.insertNode(range.createContextualFragment(<![CDATA[
<statusbarpanel label="Hallo World!"/>
]]>.toString().replace(/^[\s\t]*|[\s\t]*$/g, '').replace(/>[\s\t]+</g, '><')));
range.detach();

まずはdocument.rangeを作成、そして次に追加したいノードへと移動。
extractContents()で現在のノードの中へと入れる。
setStartAfter()を利用して、追加位置を調節（今回はpage-report-buttonの横、この場合は基本的にステータスバーの中で一番左に追加される）。
そしてinsertNode()で現在位置にノードを追加。
createContextualFragment()というのは渡されたObjectを可能な限りdocument fragmentとして返すもので、これの引数に直接E4Xの記述方法でoverlayしたいものを指定することでDOM要素に変換される。
ちなみにtoString()でごちゃごちゃやっている理由はE4Xはjavascriptのコードに直接XMLを書ける為、もし先頭部分に空白やタブでインデントをした時、そのインデントを除去するためです。
上のサンプルコードじゃ一切インデントがないから大丈夫だけど、これがもしfunctionの中に入っていたらE4Xの部分もインデントしたくなりますよね？
でも、そのままインデントしたものを渡すと色々と問題が起きるかも知れないので、toString()してテキスト置き換えでインデントを除去するのです。
とまあ、そして最後にdetach()でrangeを解放して終わりです。
これだけでE4Xを使ってXULを簡単にoverlayすることが出来ます。

参考したサイト

• Latest topics > ツリー型タブの修正 - outsider reflex