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); })();
