IT戦記

プログラミング、起業などについて書いているプログラマーのブログです😚

Firebug を「カクカク化」して $x の第 2 引数でコンテキストノードを指定できるようにする。

JavaScript Firefox

twitter の id:ZIGOROu と id:ku0522 の会話で

$x の第 2 引数コンテキストノード指定出来たらいいよねーって話しがあって
作ろうと思って
作ったら

id:os0x さんが先に作ってて
http://d.hatena.ne.jp/os0x/20071213/1197515856
実装もほとんど同じだったので凹みつつ
まあ、もったいないので晒そうとか思った。

で

今回は「チョコチョコいじれる化」しないでやる方法でやってみましょう。

題して

「拡張機能内に自分用の拡張空間を作っとく化」略して「カクカク化」

カクカク化で Firebug を拡張する手順は以下のようになります。

Firebug の拡張機能用のディレクトリに行く
環境 Firebug の拡張機能用のディレクトリ
WinVista C:\Users\[ユーザ名]\AppData\Roaming\Mozilla\Firefox\Profiles\[ランダムな文字].default\extensions\firebug@software.joehewitt.com
WinXP C:\Documents and Settings\[ユーザ名]\Application Data\Mozilla\Firefox\Profiles\[ランダムな文字].default\extensions\firebug@software.joehewitt.com
Mac ~/Library/Application Support/Firefox/Profiles/[ランダムな文字].default/extensions/firebug@software.joehewitt.com
Unix系 ~/.mozilla/firefox/[ランダムな文字].default/extensions/firebug@software.joehewitt.com
2. chrome ディレクトリに自分用の拡張ディレクトリを作る

適当に、ここを

chrome/firebug.jar

こんな感じで

chrome/firebug.jar
chrome/firebugex/
3. で、 chrome.manifest に以下の二行を追記する
content firebugex chrome/firebugex/
overlay chrome://firebug/content/browserOverlay.xul  chrome://firebugex/content/overlay.xul

overlay の最初が chrome://firebug/content/browserOverlay.xul になるように注意。

4. で、以下のような xul ファイルを chrome/firebugex/overlay.xul に置く
<?xml version="1.0"?> 
<overlay xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
    <script type="application/x-javascript">
// ... ここに拡張用の JS を書く
    </script>
</overlay>
5. chrome/firebugex 内は自分用の拡張空間として自由に使う

chrome/firebugex には chrome://firebugex/content/ でアクセスできます。
たとえば、
以下のように、 js ファイルを読み込むようにして、 chrome/firebugex/hoge.js を用意してやれば js ファイルの外部化も簡単です。

<?xml version="1.0"?> 
<overlay xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
    <script type="application/x-javascript" src="chrome://firebugex/content/hoge.js"/>
</overlay>
6. 今回の目的は $x を拡張することなので overlay.xul には以下のように書きます。
<?xml version="1.0"?> 
<overlay xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
    <script type="application/x-javascript">
    (function() {
        var _FirebugCommandLineAPI = FirebugCommandLineAPI;
        window.FirebugCommandLineAPI = function(context) {
            var baseWindow = context.window;
            _FirebugCommandLineAPI.apply(this, arguments);
            this.$x = function (xpath, context) {
                return FBL.getElementsByXPath(context || baseWindow.document, xpath); 
            };
        }
        FBL.getElementsByXPath = function(context, xpath) {
            var nodes = [];
         
            try {
                var doc = context.nodeType == 9 ? context : context.ownerDocument;
                var result = doc.evaluate(xpath, context, null, XPathResult.ANY_TYPE, null);
                for (var item = result.iterateNext(); item; item = result.iterateNext()) nodes.push(item);
            }
            catch (exc) {}
         
            return nodes;
        };
    })();   
    </script>
</overlay>

まとめ

拡張機能を拡張しまくりだぜ！フリーダム！