Web scratch

Posts Tagged ‘userChrome.js’

KeySnailついて

自分はEmacsユーザーでもありませんが、KeyConfigの代わりにKeySnailを使い始めました。
そもそもKeyConfigとは役割違うし、KeyConfigもFirefox4対応したので併用しています。
keysnailはuserChrome.jsのキー特化みたいな存在で、便利なAPIがある環境みたいなとらえ方でもいいかもしれないです。(emacsのキーバインドは一切使わないで、まっさらな状態で始めました)

Read the rest of this entry »

JavaScriptにおいてメモリ管理は基本的にエンジン任せなのであまり意識することは無いかもしれませんが、メモリリークの調査やパフォーマンスの実験のためにメモリ情報をJavaScriptから扱いたいときがあると思います。

Read the rest of this entry »

以前書いた、LDRではてなブックマーク拡張を通してはてブのコメントをみるTomblooパッチをuserChrome.jsを使って書き直してもっと使い易くしたものです。
概要的にははてなブックマーク拡張のコメントビューアー機能をuserChrome.jsからよびだしてLDRの記事についてるはてブコメントを表示するものです。(なのではてなブックマーク拡張はインストールしてないと使えません)

• ldr hatebu comments viewer.uc.js

記事にフォーカスがあった状態でmを押すとはてなコメントビューアーが開きます。
jを押すと(次の記事に移動ショートカット)コメントビューアーが開いてたときは閉じるようにしてあります。

以下、技術的な話

まず、userChrome.jsをどうデバッグすればいいのか忘れたので、とりあえずFirebugのコンソールへ吐くlog関数を用意した。

// firebugのコンソールに出力
function fbug(x) {
    var windowManager = Components.classes['@mozilla.org/appshell/window-mediator;1'].getService(Components.interfaces.nsIWindowMediator);
    var Firebug = windowManager.getMostRecentWindow("navigator:browser").Firebug;
    if (Firebug.Console.isEnabled() && Firebug.toggleBar(true, 'console')) {
        Firebug.Console.logFormatted(Array.slice(arguments));
    }
    return x;
}

もっと手軽に呼べたような気がしたけど…

次はChrome側とContent側でやりとりする方法
Chrome側ってのはuseChrome.jsや拡張機能などのいわゆる特権持ってて何でもできてしまう実行範囲のこと
Content側ってのは通常のWebサイトの実行範囲のこと。

Chrome側からContent側をいじろうとすると、XPCNativeWrapperでラップされているのでそのままではアクセスできません。
wrappedJSObjectを使って回避するのはあまり望ましいやり方ではないと思うので、今回はMessageEventを利用してChromeとContentを行き来してみました。
コードの真ん中ら辺のメイン部分だけ取り出してみると

    // docはchrome側のdocument
    // Chrome側 - 受信
    doc.addEventListener("hatenaPingMessage", function (request) {
        var res = request.data;
        if (res === "hide") {
            hBookmark.CommentViewer.hide();
        } else {
            hBookmark.CommentViewer.toggle(res);
        }
    }, false);
    // Content側 - 送信
    evalInPage(function() {
        window.addEventListener("load", function() {
            window.Keybind.add('m', function(evt) {
                var item = window.get_active_item(true);
                var permalink = item.link.replace(/#/, '%23');
                pingToChrome(permalink);
            });
            var _j = window.Keybind._keyfunc.j;// jを保存してから書き換える
            window.Keybind.add('j', function(evt) {
                _j();
                pingToChrome("hide");
            });
        }, false);
        // Chrome領域へ通知
        function pingToChrome(message) {
            var request = document.createEvent("MessageEvent");
            request.initMessageEvent("hatenaPingMessage", true, false,
                    message,
                    location.protocol + "//" + location.host,
                    "", window);
            document.dispatchEvent(request);// =>hatenaPingMessage
        }
    }, []);
}
function evalInPage(func, args) {
    var argStr = JSON.stringify(args || []);
    safeWindow.location.href = "javascript:void " + func + ".apply(null," + argStr + ")";
}

まずはChrome側のdocumentにイベントを待ち受けるhatenaPingMessageというeventを受け取れるにします。
そして、Content側でスクリプトを実行するためにJavaScript:プロトコルハックを使ってブックマークレット的に実行します。
その中で、hatenaPingMessageというオレオレイベントを発火させるpingToChromeを作って、pingToChromeで発火したイベントをChrome側でキャッチしてChrome権限が必要な処理(はてなコメントビューアーを呼び出す)をしています。
Google Chromeの拡張とかで似たような仕組みになってた気がします。

MessageEventとJavaScript:プロトコルハック

• Greasemonkey スクリプトとイベントで通信: Days on the Moon
• SmartLDR更新 – 素人がプログラミングを勉強するブログ

Google Chrome関係のメモ

• ユーザースクリプトとページ側とのやりとり – JavaScriptで遊ぶよ – g:javascript
• 拡張間連携とEvent Driven JavaScript – Constellation Scorpius

FirefoxのChromeについてのメモ

• vimperatorからウィンドウにアクセスする方法 – vimpめも – vimperatorグループ
• XPCNativeWrapperとunsafeWindowの間でデータを送受信する | へびにっき
• XPCNativeWrapper – MDC Doc Center

以前、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ができる。
今回使ってないけど。

LDRの未読件数をステータスバーに表示して定期的に更新するuserChrome.jsスクリプトです。
中身のユーザー名を自分のものに書き換えてから使用してください。

const userName = ""; // ユーザー名

デフォルトでは30分ごとに更新するようになっています。

const reMinute = 30; // 何分毎に更新する

数値だけでシンプルです

• LDRUnreadCounter.uc.js

環境によって描画がおかしくなってるかもしれないので、下のあたりといじると解決するかも。

    clearRect(0, 0, 24, 16);//透明土台 x, y, w, h
    mozTextStyle = 24 + (unread.toString().length) * -3 + "px sans-serif";//サイズ
    textAlign = "center"; // 横位置
    textBaseline = "middle";// 縦位置
    translate(0, 14);// 移動位置x,y

参考

LDRの未読件数をステータスバーに表示するプラグイン – hogehoge

http://d.hatena.ne.jp/teramako/20080730/p1

LDRの未読数をfaviconに表示するGreasemonkeyスクリプト – 素人がプログラミングを勉強するブログ

http://d.hatena.ne.jp/javascripter/20080609/1212968037

ATOKではOffice連携ツールを使うことで、IE上で選択範囲の漢字などの意味を電子辞典で調べる事ができます。
しかし、officeソフトとIE以外には対応していないので、その機能の一部をFirefoxから使うuserChrome.jsスクリプトです。
まず前提としてOffice連携ツールをインストールしていないといけません。通常は別途インストールになっていたと思います。
ATOKアップデートか［949-P ATOK 2009 for Windows］サポート・ダウンロード情報あたりから各バージョンのOffice連携ツールをインストールしてください。

そして下の場所から各バージョンにあわせたGetTextOperaLClickを任意のフォルダに保存しておいてください。

Opera, Firefox, 秀丸, Janeで電子辞典(for Windows)を使う (JustSystems まとめ)

http://sites.google.com/site/jsmatome/atok/option/tool

そしてuserChrome.jsスクリプトをFirefoxのchromeフォルダに保存して、中身を編集します。

• Search Atok.uc.js

中身のGetTextOperaLClickPath=のところを先ほど保存したGetTextOperaLClick.exeのパスに書き換えます。 ((\はエスケープして\\にするか、/にする))
そしてFirefoxを再起動すれば、文字列を選択したときにコンテキストメニューに”ATOKで検索”とでるので、実行するとGetTextOperaLClick.exeによって
電子辞典を引くことができます。

実行例

GetTextOperaLClickは他のソフトでもつかえるので、詳しい使い方はOpera, Firefox, 秀丸, Janeで電子辞典(for Windows)を使うをみるのがいいと思います。