Greasemonkey スクリプトの冒頭に書く 5 行
WordPress with Twitter の不具合を修正した記念に、Greasemonkey を書く時に頻繁に利用する関数をまとめたので、公開してみます。
外部の JavaScript ライブラリを読み込む方法を解説したサイトもありますが、そこまで大げさな機能が必要でもなく、軽く動作させたいときに便利です。
特に共通ライブラリを利用すると、Firefox 以外のブラウザの対応も無駄に読み込む事になるので、スマートじゃないなぁと思います。
var d = document;
var $ = function(id) { return d.getElementById(id); }
var $x = function(xp) { return d.evaluate(xp, d, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue; }
var $a = function(xp) { var r = d.evaluate(xp, d, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null); var a=[]; for(var i=0; i<r.snapshotLength; i++){ a.push(r.snapshotItem(i)); } return a; }
var $e = function(e,t,f) { if (!e) return; e.addEventListener(t, f, false); }
- d
document のエイリアスです。目的はコードの短縮と実行速度の高速化です。 - $ 関数
getElementById のエイリアスです。説明不要でしょう。 - $x 関数
xpath を引数としてとり、最初に一致したエレメントを返します。 - $a 関数
xpath を引数としてとり、一致したエレメント全てを配列で返します。 - $e 関数
addEventListener のエイリアスです。説明不要でしょう。
Greasemonkey で既存のサイトをいじくる場合、対象のエレメントに必ずしも id が振られているとは限らない (むしろそうなっていない場合が多い) ので、xpath から任意のエレメントを簡単に取得できる、$x/$a は有用かなと思います。
この辺は、ブラウザ間の互換を考えないといけない汎用ライブラリではなかなか実装できないところですね。
もちろん、下記のように名前空間を汚さないように書くのは基本的なマナーです。
$ 関数とかをグローバル (window オブジェクトのメンバ) に定義しちゃうと、サイトによっては壊滅的に動作がおかしくなってしまうかも?
(function(){
// 処理本体
})();
2009-01-26 追記 — コメントでご指摘いただいた点について
Greasemonkey の実行環境はサンドボックス上にあるので、function によるラッピングは不要だそうです。
ちまたでよく見る GM は大概ラッピングされていたので、ずっと勘違いしていました。公式マニュアルにリンクしておきます。
公式マニュアル
$a のパフォーマンスが良くないという話もありますが、配列のサイズがあらかじめ確定しているので、配列のインスタンス生成時にサイズを指定するようにして、push を使わないほうがいいよ。って事かと思います。気になる方は直して使って下さい。
いずれにせよ、ご指摘ありがとうございました。
3件のコメント »
RSS feed for comments on this post. TrackBack URL
$aがもっとも早い実装よりも20%ぐらい遅そうなのは特に気にしないとして。FirefoxのGreasemonkeyの場合はサンドボックスのようなラッピングされた別の環境で実行されるので、functionで囲む必要は特に無いですよ。
ご指摘ありがとうございました!
本文中にコメントを追記しました。
[...] ビューってのがあまり好きじゃないんですよね。 発売日前のレビューは非表示にできるようにgreasemonkey(初体験)を書いてみようと思い、 とりあえずお知り合いのここを参照して調べる。 [...]