greasemonkey内でjQueryを使う

　久々にuserscript書こうと思って、greasemonkey辺りを触ってた。最近chromeではjsshellとか言うのがあるらしいけど、firefoxだったら今もgreasemonkeyで書いたらいいんだろうか。いまいちよくわかってない。

　それはともかくuserscript内でjQueryとjQuery UIを使いたかったのでいろいろ調べた。

基本

　userscriptでは最初の部分にいろいろ書くと、どんなURLで読み込むかとか設定できる。そこで@requireを使っておけばとりあえず、jQueryを読み込んで使うことができる。

// ==UserScript==
// @name Script Name
// @description Script Description
// @namespace http://saficion.com/
// @include http://localhost/*
// @require http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js
// @require http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js
// ==/UserScript==

　こんな感じで@requireを使ってjQueryを読み込んでおけば、userscriptをインストールするときに一緒にダウンロードしておいてそれを使ってくれる。

　つかえるバージョンはいろいろ制限があるっぽくていまいちよくわかってない。Third-Party Libraries - GreaseSpot WikiにはjQueryは1.3までしか動かないみたいなこと書いてある。jQuery UIは1.5.2までしか動かないって書いてある。
　ただ、How to make JQuery resizable & draggable work with Greasemonkey? - Stack Overflowとかには、1.5.2とかは動くとかそれじゃないと動かないとか色々書いてある。とりあえず1.5.2を使うことにしている。

　とりあえず@requireしておけば次のような感じで使うことができる。便利。

(function ($) {
    var $content = $('#content');
})(jQuery);

css

　jQuery UIはcssも読み込む必要があるので、greasemonkeyでも読み込まないといけない。@resourseというのを使って、ダウンロードしておいて、実行の時にcssを適用することで、これを実現できる。

以下をヘッダ部分に追加して上で

// @resource jQueryUICSS https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/base/jquery-ui.css
// ==/UserScript==

次のようにcssを適用する。

(function ($) {
    var css = GM_getResourceText("jQueryUICSS");
    GM_addStyle(css);
})(jQuery);

画像ファイル

　上の設定をしても、jQuery UIのcssに含まれる画像ファイルにうまく対応出来ない。これはcss内でurl(...)が使われている事により、相対パスで画像ファイルを探そうとするのだが、ローカルにそのような画像ファイルが無いためである。
　これを解決するにはcss内の相対パスを内部のリソースへのパスへ強制的に置き換える必要がある。例えば

// @resource ui-icons_222222_256x240.png https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/base/images/ui-icons_222222_256x240.png

でローカルに必要な画像ファイルを落としておいて

(function ($) {
    var resourceNameMap = {
        'ui-icons_222222_256x240.png' : 'ui-icons_222222_256x240.png'
    };
    var css = GM_getResourceText("jQueryUICSS");
    $.each(resourceNameMap, function(filename, resourceName) {
        css = css.replace('images/' + filename, GM_getResourceURL(resourceName));
    });
    GM_addStyle(css);
})(jQuery);