tokenの日記： greasemonkey入門メモ

最近、GreaseMonkeyでtable-tr-tdの操作をしたのでメモしておく。

01. GreaseMonkey, Firebug, Spketをインストール
GreaseMonkeyは必須だけど、FirebugはXPathを取り出すのに必要。Spketは、eclipseを形作っているライブラリを利用したJavaScriptエディタ。abount:configのgreasemonkey.editorのような項目に、Spketのフルパスを指定しておく。

02. GreaseMonkeyから新規作成する。
gm_scriptの保存先を調べなくて済むし、どうせ編集はSpket経由で行うし、scriptを実行するURIの決定や、scriptの名称決定もUIが用意されてるから。

03. とりあえずMetaデータを追加する。
@version 0.0.1 とかは書いておいた方がソースの整理に便利。

04. コード全体を無名関数の中に置く。
他スクリプトとの競合を防ぐらしい。実際に競合を体験した事は無いけど、きっと悩ましい問題のようだから、初めてでも先に手を打っておく方が良さそう。

(function() {
// write code here..
})();

05. Spketにsnippetを追加しておく
Spketの右端にsnippetの欄がある。そこにXPathからelementを取り出すコードを追加。

function x(path, d) {
    if (!d)
        d = unsafeWindow;// document; // document is self.
    return document.evaluate(path, document, null,
        XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
}

06. Firebugを使って要素を調査する
そこから、XPathをコピー。

07. snippetに追加した関数を使う

var path = "/html/body/table[3]/tbody"; // Firebugから取得したXPath
var elems = x(path);
GM_log("[elems.snapshotLength]="+elems.snapshotLength);

XPathResult#snapshotLengthで取得した要素の数を知る事が出来る。複数あればXPathResult#snapshotItem()を使って中身を調べて、Firebugと見比べながら取得したい対象かどうかを調べていく事になる。

for(var i=0;i<elems.snapshotLength;i++){
  var elem = elems.snapshotItem(i);
  GM_log(elem.nodeType + " / " + elem.nodeName + " / " + elems.hasChildNodes());
}

GM_log()は、greasemonkeyからfirefoxのエラーコンソールへメッセージを出力するGM関数。

08. snapshotItemを特定して取得する

var elem = elems.snapshotItem(0);

09. NODEオブジェクトを弄る
XPathResultオブジェクトのelemsから、snapshotItem()メソッドを使って取り出したオブジェクトはNodeオブジェクト(Javaのorg.w3c.dom.Nodeインタフェースに定義されているメソッドやフィールドとほぼ同じ。参考[2])になる。その為、これ以降の操作はNodeオブジェクトの操作と同じ。

10. その他の事
基本的にJavaScriptの上にGreaseMonkeyを被せてあるような環境なので、KeyEventは簡単に作れる。
element イベントハンドラ

document.addEventListener('＜イベントハンドラ＞', function(e) {
  // do something.
}, false);

11. その他の事２
(記憶はオボロゲ)

JavaScriptには型が無いからURLもStringも同じ扱いでいいや、と思っていたけどそこにハマり道が隠されていた。

nodeName:AのNodeオブジェクトnodeAをGM_log(nodeA)で出力すると、href属性の値が出力される。この時だけ、何故かNode#toString()のような振る舞いをする。

けれども、URLを文字で受け取って処理をするような関数に、nodeAをそのまま渡すと、エラーになってしまう。必ず、nodeA.toString()とやらないと文字として受け取ってくれないらしい。