Greasemonkey で 超お手軽に jQuery を使うスニペット2009-11-04

タイトルの通りです。

特徴

• script タグ追加型の読み込み
• $ 関数として利用可能
• 該当ページですでに jQuery が読み込まれていればそれを利用
• jQuery スクリプト自体のアップは不要 (Gogole の CDN を利用)
• ローカルのキャッシュも多分有効 (CDN が適切なヘッダを返してれば)
• jQuery 読み込み完了を待ってから実行される

作成動機

Greasemonkey で jQuery を使う方法検索してみると、GM_xmlhttpRequest で読み込んで eval する方法と、script タグを追加する方法に大別されます。
前者の方がスマートなやり方ではあるのですが、スニペットとして貼り付けるにはいかんせんコードが長くなりがちなのと、jQuery が導入される名前空間の違いからか、jQuery がフル機能で利用出来ないといった制限があるようです。
そこで後者を選択しようと思ったのですが、検索で上位に来るスクリプトはいまいち洗練されていなくて、二重読み込みなどの問題が解決されていなかったりします。

で、自分で書く事にしました。
特に任意のサイトで動作させるスクリプトを書くような場合、元々のページに jQuery が導入済みでもそれに干渉しない、というのがウリでしょうか。

スクリプト

(function(d, func) {
    var check = function() {
        if (typeof unsafeWindow.jQuery == 'undefined') return false;
        func(unsafeWindow.jQuery); return true;
    }
    if (check()) return;
    var s = d.createElement('script');
    s.type = 'text/javascript';
    s.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js';
    d.getElementsByTagName('head')[0].appendChild(s);
    (function() {
        if (check()) return;
        setTimeout(arguments.callee, 100);
    })();
})(document, function($) {
    // ここにメインの処理を書く
    $('#button').click(function(){
        alert('clicked!');
    });
});

重たい処理は必要ないぞ、っていう場合はこちらも参考にどうぞ。
Greasemonkey スクリプトの冒頭に書く 5 行

Greasemonkey を書く時に頻繁に利用する関数をまとめたので、公開してみます。
外部の JavaScript ライブラリを読み込む方法を解説したサイトもありますが、そこまで大げさな機能が必要でもなく、軽く動作させたいときに便利です。
特に共通ライブラリを利用すると、Firefox 以外のブラウザの対応も無駄に読み込む事になるので、スマートじゃないなぁと思います。