Firefox: Greasemonkey ユーザスクリプトの書き方

Greasemonkey のユーザスクリプトは、単体の JavaScript ファイルになっている。

公式ドキュメント

Writing User Scripts
http://greasemonkey.mozdev.org/authoring.html

考え方

ユーザスクリプトは、コメントにメタ情報が含まれる以外は、通常の JavaScript ファイルになっている。Greasemonkey は、Firefox がページ内容読込みを完了して後、onload イベントの呼び出しが行われる直前に、そのドキュメントのコンテキストでユーザスクリプトを実行する。したがって、読み込まれた内容を DOM 経由でいじるようなスクリプトを書けばいい。

単純な例

// ==UserScript==
// @name          Shorten ?D
// @namespace     http://example.com
// @description	  Replace "Hatena Diary" with "?D"
// @include       http://d.hatena.ne.jp/*
// ==/UserScript==

(function() {
    document.title = document.title.replace(/\u306F\u3066\u306A\u30C0\u30A4\u30A2\u30EA\u30FC/g , "?D");
})();

タイトル (title 要素の内容) に「はてなダイアリー」があったら「?D」に置換するユーザスクリプト。ここで注意が必要なのは

  • ファイル先頭にメタ情報を付ける。
  • @name でつける名称は、@namespace で指定した名前空間内で一意なものにする。
  • @include にデフォルトの対象 URL を書く (複数可)。
  • ドキュメント内のスクリプトと衝突しないように、「無名関数を作って呼び出す」方式を取っている。
  • 日本語はばけるので、Unicode エスケープを使って回避。

なお、上記のスクリプトは document.title だからいいが、文書構造自体を書き換える場合には、onload イベントの利用が推奨されている (Firefox の動作がおかしくなるのを防ぐためらしい)。この場合の書き方は下のようになる。

//略

(function() {
  window.addEventListener("load", function(e) {
    document.title = document.title.replace(/\u306F\u3066\u306A\u30C0\u30A4\u30A2\u30EA\u30FC/g , "?D");
  }, false);
})();

作ったスクリプトは、Firefox のウィンドウにドラッグ&ドロップした後、[ツール]→[Install User Script] でインストールできる。この時、スクリプトファイルが Firefox の Profiles ディレクトリ内にコピーされる。後は、このファイルを直接エディタで編集すれば、すぐに反映される。

ツール

いじりたいページの構造を見るには、Firefox と一緒に DOM インスペクタをインストールしておくと便利だ。デフォルトでは表示が "DOM Nodes" になっており、ドキュメントの構造が簡単に見られる。また、"JavaScript Objects" にすれば、スクリプトからいじれるプロパティやメソッドが調べられる。

追記 (15:20)

日本語文字化けの回避方法については、以下の記事を参考にさせて頂きました。

tapotの日記 - 文字化けしなくなったらイイナ!
http://d.hatena.ne.jp/tapot/20050701/p1
tapotの日記 - 文字化けしなくなったらイイナ! 第2話
http://d.hatena.ne.jp/tapot/20050711/p1

……紹介さぼってたら先方から先にトラックバック頂いてしまったので、慌てて追記してみました。