読者です 読者をやめる 読者になる 読者になる

zuzuの開発日記

iMona@zuzu等の開発者であるzuzuの趣味や業務で学んだ事などを書き連ねるブログ

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

JavaScript ScrapCode

某有名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()でごちゃごちゃやっている理由はE4Xjavascriptのコードに直接XMLを書ける為、もし先頭部分に空白やタブでインデントをした時、そのインデントを除去するためです。
上のサンプルコードじゃ一切インデントがないから大丈夫だけど、これがもしfunctionの中に入っていたらE4Xの部分もインデントしたくなりますよね?
でも、そのままインデントしたものを渡すと色々と問題が起きるかも知れないので、toString()してテキスト置き換えでインデントを除去するのです。
とまあ、そして最後にdetach()でrangeを解放して終わりです。
これだけでE4Xを使ってXULを簡単にoverlayすることが出来ます。

広告を非表示にする