Greasemonkeyメモ

いつの間にかgreasemonkeyの中でjQueryとかのライブラリが使えるようになってました。
他にも色々と知らないことがあったのでメモしておきます。

@require

スクリプトの先頭に色々書くあそこに「@require」って書くと、外部JavaScriptをincludeして使うことができます。

例：

// ==UserScript==
// @name           test
// @include        http://localhost/*
// @require        http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js
// ==/UserScript==

(function($){
  $('body').click(function(){
    alert('クリックしました。');
  });
})(jQuery);

思ったこと

なぜか「$」が使えない。「jQuery」は使えるのに。なのでスクリプト全体を関数で囲んで「jQuery」を渡してあげるのがセオリーみたい。
ライブラリのURLは、 AJAX Libraries API - Google Codeにあるのを使うのが良いです。
@requireを使うスクリプトを作成する場合、右下のサルを右クリックして「新規ユーザースクリプト」で作るとうまくいきませんでした。「@require」って書かれた状態のスクリプトファイルをFirefoxにドラッグ&ドロップして、ユーザースクリプトのインストールをすることで、@requireのファイルがダウンロードされてローカルに保存されてスクリプトから利用できるようになるみたいです。私はこれを知らずに小一時間ほど頭を抱えることになったので要注意です。

@resouce

「@resouce」を使うと、スクリプトの中でCSSや画像ファイルを扱えるようになります。

// @resource name url

って指定して

GM_getResourceText('name');

って書くと、urlで指定したファイルのテキストデータが取得できます。
バイナリファイルの場合は

GM_getResourceURL('name');

って書くと、urlで指定したファイルの中身を示す「data:」形式のURLが取得できます。

例：

// ==UserScript==
// @name           test
// @include        http://localhost/*
// @resource style http://gist.github.com/raw/99181/9d511e468af600a93df53e17c0ab1de1e2f17a90/gistfile1.css
// @resource image http://img.f.hatena.ne.jp/images/fotolife/s/syttru/20080221/20080221011637.png
// ==/UserScript==

(function(){
  // スタイルシートを読み込む
  var style = GM_getResourceText('style'); // style -> ".test_style{ color ... }"
  GM_addStyle(style);
  
  // div要素を作ってスタイルシートを適用してbodyに追加する
  var div = document.createElement('div');
  div.setAttribute('class', 'test_style');
  div.innerHTML = 'そうなのかー';
  document.body.appendChild(div);
  
  // bodyの末尾に画像を追加する
  var img = document.createElement('img');
  var image = GM_getResourceURL('image'); // image -> "data:image/png;base64,iVBORw0K..."
  img.setAttribute('src', image);
  img.setAttribute('alt', 'ソーナンス');
  document.body.appendChild(img);
  
})();

思ったこと

@resourceで読み込むCSSや画像ファイルは「http://」か「https://」か「ftp://」形式のURLで指定しないといけません。つまりファイルを置いておく場所が必要だということです。
画像ファイルはFrickrとかはてなフォトライフとかの画像共有サービスを利用して、CSSとかのテキストファイルはgistとかGoogle CodeのプロジェクトホスティングとかAssemblaとかのソースコードのホスティングサービスを使うのがいいんじゃないかなーと思いました。