Web scratch

Archive for the ‘userChome.js’ Category

以前、GreasemonkeyにGrowlのような通知を呼ぶ機能を加える「Dbus Notify」 | Web scratchでGreasemonkeyから使える機能を増やせたら楽しそうと書いたと書きましたが、calloutのソースを参考にGreasemonkeyスクリプトから使える関数を追加するuseChrome.jsを書いてみました。

このuserChrome.jsを読み込むと、

fbug
Clipboard.get
Clipboard.set

などのメソッドがGreasemonkeyスクリプトから使えるようになります。
fbugはconsole.logと同じ動作ですが、Firebugのウィンドウを開いていない状態(Firebugがオフ)でもFirebugのウィンドウを開いてからlogを出してくれる関数です。(元ネタはxqjs)
Clipboardの方はjetpack prototypeからのコピペなのであんまり確認してません。

当たり前ですがこのuseChrome.jsをインストールしてない人の環境ではfbugなどの関数は使えないため、デバッグ目的か自分用のGreasemonkeyに使用する感じになると思います。
以下のようにデバッグ時のみ動く関数でラップしておけば、配布の際にDEBUG = false;とするだけでいいので楽かも知れません。

var DEBUG = true;

    log("なんとか");
    // DEBUG - http://gist.github.com/428596
    function log() {
        if ( typeof DEBUG != 'undefined' && DEBUG ) {
            fbug.apply(this, arguments);
        }
    }

何かもっと便利なデバッグ関数とか作れそうな気がします。
多分Greasemonkeyスクリプトからしか動かないようにできているので(あんまり自信ない)、そこまで危険な事は起こらないかと思いますが安全は保証できないので自己責任でというテンプレを入れておく。

gist: 428596 – Greasemonkeyから使える関数を追加するuserChrome.js- GitHub

http://gist.github.com/428596

Firefoxの拡張機能(アドオン)の有効になってるか無効になってるかを記録して保存できます。
またその保存したものから各アドオンの有効の有無を復元することができます。

例えば、Firefoxの動作がおかしいなと感じて、どのアドオンが原因なのかを調べるときに、調べる前の有効状態を保存してから、一個一個アドオンを無効化して試し、原因となるアドオンが分かったら有効状態を復元して直ぐに元通りにできます。

似たような事を行えるVimperatorプラグインがあります。

アドオンの有効無効状態を保存＆復帰できるプラギン – Death to false Web browser! – vimperatorグループ

http://vimperator.g.hatena.ne.jp/nokturnalmortum/20100203/1265202872

このスクリプトはuserMenu.jsが必要となるので、userChrome.jsでメニュー拡張を追加できる「userMenu.js」 | Web scratchを読んでuserMenu.jsを導入してからChromeフォルダのtoolmenuフォルダに入れてください。

• 0001.アドオン有効状態を保存.S.js

に保存されています。(JSON.parseして使う。)

userMenu.jsに付属していた0000.アドオンリストをタブに表示.L.jsを元にしました。

他の参考にしたもの

nsIExtensionManagerで使えるもの
nsIExtensionManager.idl

ダイアログの使い方。
nsIPromptService – MDC

https://developer-stage.mozilla.org/en/nsIPromptService#confirmEx()

ダイアログの使い方。日本語ですがいろいろ抜けてます。

Dialogs and Prompts – MDC

https://developer-stage.mozilla.org/ja/Code_snippets/Dialogs_and_Prompts

userChrome.jsでJavascript Actionsのようなスクリプトの実行コマンドをサブメニューのネスト, タブメニューやメインメニュー、コンテキストメニューなどのメニューに追加する形のスクリプトを扱いやすくしたり、GreasemonkeyのAPIと似たような機能を持つライブラリが使える要にするuserMenu.jsの紹介

ダウンロードは以下の場所から

userChrome.js – Mozilla Firefox まとめサイト

http://firefox.geckodev.org/index.php?cmd=read&page=userChrome.js&word=user#g4f5f928

いろいろバージョンが置かれてますがuserMenu.js ver. 1.21mod 一式(Fx3以降)と最新のものをダウンロードして、ver1.21はあらかじめtabmenuなどのフォルダがあって分かりやすいので、それらを最新版で上書きすると良いでしょう。

こんな感じのファイルが入ってるので、とりあえず動作させるために、FirefoxプロファイルのChromeフォルダにそのまま中身を突っ込みます。

Chrome
│  0.UCJSToolkit.uc.js
│  GM_modoki.jsl
│  jsa.jsl
│  JSA_modoki.jsl
│  preload.sample.txt
│  scripting.txt
│  userMenu.js.readme.txt
│  userMenu.pl.js
│  userMenu.uc.js
│  ここにはuserChrome.jsなども存在
│
├─contextmenu
│      Add Copy.se.js
│      Element Killer.js
│      Google cache.nl.js
│      Google Translate.se.js
│      Open IE.nl.js
│      Open Selection.se.js
│      Reload Image.im.js
│      Use Javascript.auto.js
│      Wayback.nl.js
│
├─tabmenu
│  └─Order.ct
│          FrameOrder.ct.auto.js
│          ImageOrder.ct.auto.js
│          JSOrder.ct.auto.js
│          PluginOrder.ct.auto.js
│          RedirectOrder.ct.auto.js
│          userContentOrder.ct.auto.js
│
└─toolmenu
        0000.アドオンリストをタブに表示.L.js
        Inspection Here.js
        Rebuild User Menu.js
        Reload userContent.css.js
        Restart Firefox.r.js
        ~.---

移動させて再起動すると、コンテキストメニューやツールメニューにいろいろな項目が増えていれば成功です。

一つ一つのスクリプトの機能は数が多いので適当に見れば分かるので、開発したスクリプトをメニューに表示させる方法へ。scripting.txtやuserMenu.js.readme.txtを見ると詳しく書いてありますが、contextmenuやtoolmenuといったフォルダがそのままの構成でメニューと対応してるので、それらのフォルダに作ったスクリプトをjs拡張子にして入れるだけで簡単に登録できます。(スクリプトのファイル名ルールでショートカットなども設定できる)
例えば、右クリックに表示されるスクリプトで複数のものを一つのフォルダに入れれば、それが一つの階層になります。

contextmenu
└─JSAction
        Add Copy.se.js
        Element Killer.js

また先ほど紹介したようにGreasemonkeyのAPIと同様の機能を持ったものが一部使えます。
GM_setValueやGM_xmlhttpRequestなど。

デバッグ方法としてconsole.ほげ()というFirebugで使われるメソッドが使用できると書いてあるのですが、イマイチ動かなかったので、
GM_modoki.jsl (GreasemonkeyのAPIを定義してるファイル)の先頭部分に

// fbug(x)でFirebugのコンソールに出力
function main(){
  var windowManager = Components.classes['@mozilla.org/appshell/window-mediator;1']
                                .getService(Components.interfaces.nsIWindowMediator);
  return windowManager.getMostRecentWindow("navigator:browser");

}
function fbug(x){
   var {Firebug} = main();
   if(Firebug.Console.isEnabled() && Firebug.toggleBar(true, 'console'))
     Firebug.Console.logFormatted(Array.slice(arguments));
   return x;
}

と書き足して、fbug(x)でFirebugのコンソールに出力するようにしました。
Services.jsmが使えるなら以下のような感じで書けるようです。xqjs – ’ellaneous が元ネタです。

Cu.import('Services.jsm');// 読み込み先にresource:// かfile://
function main() Services.wm.getMostRecentWindow('navigator:browser');
function fbug(x){
   var {Firebug} = main();
   if(Firebug.Console.isEnabled() && Firebug.toggleBar(true, 'console'))
     Firebug.Console.logFormatted(Array.slice(arguments));
   return x;
}

上記のfirebugコンソールへの出力はxqjsのソースコードを見て知ったものです。
xqjsはExecute JSのようなその場でChromeやcontentに対してJavaScript実行できるアドオンです。
話題のCoffeeScriptやJavaScriptの単語補完、マクロ機能、便利なユーティティ関数などが使える優れたFirefoxアドオンなので、JavaScript ShellやFirebugのコンソールで入力するのが微妙だなーと思う人は一度使って見るといいかと思います。
fbugでFirebugのコンソールにもlogを吐けるので連携させるとなお便利。
Firebugで定義されているXpathやCSSセレクタもマクロで定義されており、copy関数なども存在します。

詳しくは作者さんのページとAMOとソースを読む。

xqjs – ’ellaneous

http://d.hatena.ne.jp/murky-satyr/20100504/xqjs

話が完全にすり替わりましたが、userMenu.jsはuserChrome.jsを書く上でかなり便利だと思うので、一度見てみることを進めます。

userMenu.js

http://firefox.geckodev.org/index.php?cmd=read&page=userChrome.js&word=user#g4f5f928

FirebugでDOMをtoSource()したときに生成されるJSON形式のようなものがかなり見えづらいので、それを読みやすくコンソールに表示するuserChrome.jsを作成した。
あくまで、見易く表示させることを目的としてたので、整形したものを使うという用途には向いてないかもしれません。

Read the rest of this entry »

FirebugのコンソールタブにあるコマンドラインはちょっとしたJavascriptの動作を確認する際に便利ですが、普段使ってるエディタのように補完やハイライトされないので、少し複雑になると分かりづらくなりますね。
そこで、内容の編集自体はエディタで行いその内容をコマンドラインに反映させるuserChome.jsを作成しました。

• Firebug_editor.uc.js

使い方

1. ダウンロードしたスクリプトに60行目くらいにエディタのパスを設定する場所があるのでパスを入れる
2. Firebugのコンソールタブで大きい方のコマンドラインを開く
3. 右下にEditorというボタンがあるので押す
4. エディタで内容を編集→保存
5. Firefoxにフォーカスを戻すと自動的に反映

下に動作の動画を置いておくので、下を見ればどのように動いてるか分かると思います。

alice0775のスクリプトが元になってるので、Windows以外でも動くとは思います。
ラップする必要があったらしい。

userChrome.jsの話題9 テキストエリアを外部エディタで編集する – alice0775のファイル置き場 – Yahoo!ジオシティーズ

http://space.geocities.yahoo.co.jp/gl/alice0775/view/20070223/1172156543

gist: 235044 – Firebugに外部エディタ起動ボタンを追加するuserChrome.js- GitHub

http://gist.github.com/235044

メモ

Firebug.chrome.$("fbLargeCommandLine").addEventListener('focus', function(){
	Application.console.log("tewt")
}, true);

とかChrome権限でやるとコマンドラインにフォーカスしたときに動作するaddevenetlinerができる。
今回使ってないけど。