$shibayu36->blog;

クラスター株式会社のソフトウェアエンジニアです。エンジニアリングや読書などについて書いています。

dive into grease monkeyを読んでみた

grease monkey

いろいろ参考になるところがあったので、役に立ちそうなところをメモ。GMというか、JavaScriptのメモになりそう

第四章よくあるパターンから

xpath関数

document.evaluateを何度も使うのはだるい！ということで、次の関数。返り値のタイプは状況に応じて変えればいいと思う。

function xpath(query) {
return document.evaluate(query, document, null,
XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);
}
サーバに接続せずに画像を加える

firefoxはdata:URLをサポートしているため、スクリプト内部に画像を埋め込める。dataはどこか他のサイトで作ろう。

var logo = document.createElement(’img’);
logo.src = \
    ’data:image/gif;base64,R0lGODlhDQAOAJEAANno6wBmZgAAAAAAACH5BAAAAAAA’+
’LAAAAAANAA4AQAIjjI8Iyw3GhACSQecutsFV3nzgNi7SVEbo06lZa66LRib2UQAAOw%3D%3D’;
document.body.insertBefore(logo, document.body.firstChild);
CSSを追加する

CSSを追加したいときは、次の関数が使える。確かにこうすれば使えるなぁ・・・。自分で思いつけなかったのが残念。

function addGlobalStyle(css) {
    var head, style;
    head = document.getElementsByTagName(’head’)[0];
    if (!head) { return; }
    style = document.createElement(’style’);
    style.type = ’text/css’;
    style.innerHTML = css;
    head.appendChild(style);
}
addGlobalStyle(’p { font-size: large ! important; }’);
現在あたっている要素のスタイルを取得する

element.styleプロパティを見るのではなく、getComputedStyle関数を使う。getComputedStyle について調べてたら深みにハマったのでメモ - IT戦記に書かれている内容も参考になった。

p1style = getComputedStyle(p1elem, ’’);
大文字と小文字を区別せずに属性の値をマッチさせる

HTMLの属性の多くは大文字と小文字を区別しないので、次のようにXPathのtranslate関数を使うと、安全。

var postforms = document.evaluate(
    "//form[translate(@method, ’POST ’, ’post’)=’post’]",
    document,
    null,
    XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE,
    null);

第五章事例研究から

どんな属性があるかわからないelementに対して、どれかの値を使う
if (a.nodeName == ’INPUT’) {
    label = document.evaluate("//label[@for=’" + a.name + "’]",
    document,
    null,
    XPathResult.FIRST_ORDERED_NODE_TYPE,
    null).singleNodeValue;
    if (label) {
        desctext = label.title;
        if (!desctext) { desctext = label.textContent; }
    }
}
if (!desctext) { desctext = a.textContent; }
if (!desctext) { desctext = a.title; }
if (!desctext) { desctext = a.name; }
if (!desctext) { desctext = a.id; }
if (!desctext) { desctext = a.href; }
if (!desctext) { desctext = a.value; }

第六章　発展事項から

長期的に残るデータを保存・取得する

GM_setValueとGM_getValueを使うと、そのスクリプトだけが参照できるプライベートなデータを保存できる。grease monkeyに設定項目とかをつけたいときはこれを使うとよいかも。

function GM_setValue(key, value);
function GM_getValue(key, defaultValue);
メニューバーに項目を追加する

Greasemonkey はGM registerMenucommand を定義していて，これを使うとユーザースクリプトでFirefox メニューバーに項目を追加することが可能らしい。登録されたメニュー項目はユーザースクリプトが有効であるときにUser Script Commands サブメニューに現れる。

function GM_registerMenuCommand(menuText, callbackFunction);

callbackFunctionはメニューが選択されたときに使われる関数らしい。

まとめ

とりあえずいろいろ役に立ちそうな事をメモしてみた。このドキュメントを書かれたときより、grease monkey自体のバージョンが上がっているから、もしかしたらもっと良い方法が出ているかもしれない。ドキュメントを見ながら、もっと勉強しよう。