環境	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>

まとめ

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

2007-11-30

Firefox の拡張機能をふとした時に手元でチョコチョコいじれるようにしとくと楽しい

Firefox

この記事で

Firebug ハッキング Tips を纏めたい
Firebug に一行追記して右クリックで XPath をコピペ出来るようにする。 - IT戦記

とか言ってたけどその前に、
僕は Firebug だけじゃなくて、
だいたいの拡張機能で、簡単に「チョコチョコいじれる化」というのをしてるのでそれを書いてみます。

チョコチョコいじれる化とは

jar ファイルを解凍しておいてすぐ書き換えられるようにしとくこと。
「チョコチョコいじれる化」しとくと気付いたときにちょっと JS や XML や CSS を追加するだけで、いろいろ改造できて楽しい。
「でも、 Firefox が壊れる可能性があるじゃん＞＜」って？
チッチッチ、ナンセンスだよメーン
そんなの拡張機能のディレクトリを削除しちゃえば元通りさ

Don't be scared!
iKnow!で英語。ちょっとの努力で、大きな成果を。 - iKnow!

ということで、「チョコいじ化」手順

1. Firefox のプロファイルディレクトリに行く

環境	プロファイルディレクトリ
WinVista	C:\Users\[ユーザ名]\AppData\Roaming\Mozilla\Firefox\Profiles\[ランダムな文字].default\
WinXP	C:\Documents and Settings\[ユーザ名]\Application Data\Mozilla\Firefox\Profiles\[ランダムな文字].default\
Mac	~/Library/Application Support/Firefox/Profiles/[ランダムな文字].default/
Unix系	~/.mozilla/firefox/[ランダムな文字].default/

2. 拡張機能の入ってるディレクトリにいく

extensions ディレクトリに拡張機能が入っていますので、そこに移動してください。
そのディレクトリ内に入ってる一個一個のディレクトリが拡張機能です。
もし、この時点でガクブルな人はこのディレクトリの一個を消してみましょう。
そうして Firefox を再起動すると拡張機能が一個消えてると思います。
拡張機能なんてただそれだけのことなんです＞＜

3. いじりたい拡張機能のディレクトリを探す

大抵、拡張機能のディレクトリ直下に install.rdf というファイルがあるので、それを開いてみると拡張機能の名前が書いてあります。

4. 拡張機能 ディレクトリの chrome ディレクトリを開く

拡張機能ディレクトリ内に chrome というディレクトリがあるので開きます。
ディレクトリの中に jar ファイルがなくて JS とかが入っている場合は、
その拡張機能は「チョコいじ化」出来てるので、すぐに改造できます。
試しに、そこに置いてある JS に alert('hoge') とか追記してみましょう。
まあ、大抵の場合は jar ファイルが一個だけ置いてあったりします。

5. jar ファイルをその場に zip で解凍します。

すると

chrome/hoge.jar

がこうなると思います。

chrome/hoge.jar
chrome/content/..
chrome/content/..
chrome/content/..
chrome/skin/..
chrome/skin/..

まあ、拡張機能によって違いますが、、、

6. 次に chrome.manifest をいじる

次に、chrome ディレクトリから一個上に移動して chrome.manifest を開きます。
そうすると

content hoge jar:chrome/hoge.jar!/content/
skin hoge jar:chrome/hoge.jar!/skin/

となっていて、 hoge.jar の中を見るようになっています。
ですので、こんな感じで書き換えちゃ行ってください。

content hoge chrome/content/
skin hoge chrome/skin/

そうすると、解凍されたほうを見に行くようになります。

7. はい、完成

これで、拡張機能内の JS とかを書き換えられまくります！
これなんてフリーダム！
ウホ！いい感じ！
動かなくなったら chrome.manifest を元に戻せばいいんです＞＜

8. 実は、この方法で、 Firefox 本体のほうも結構いじれます。

この方法はちょっとだけ、危険なので自己責任でおにゃがいすます。
Firefox 本体のインストールディレクトリにいくと chrome というディレクトリがあります。
そして、そのディレクトリをみると browser.jar や browser.manifest などのファイルがあるので、
同様に書き換えることでブラウザ自体をチョコチョコ改造できちゃうのです！

まとめ

こうしとくと、 5 分でブラウザに欲しい機能を実装できます。
便利＞＜！