2010-12-27

chromeで動くGresemonkeyスクリプトでjQueryを利用する

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク
jQueryがステキなのでGreasemonkeyスクリプトでもjQueryを利用しています。

Firefoxだけで動くGreasemonkeyスクリプトでは以下のように書いていました。
(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($) {
    //ここに処理を書く
    alert("There are " + $('a').length + " links on this page.");
});

でもこれではChromeでは動かなかったのです。
理由はよくわかりませんが、
unsafeWindow.jQuery
がずっと
undefined
になっているせいのようです。

Chromeでも動くGreasemonkeyスクリプトでjQueryを利用するには以下のように書くとよい感じです。
function addJQuery(callback) {
  var script = document.createElement("script");
  script.setAttribute("src", "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js");
  script.addEventListener('load', function() {
    var script = document.createElement("script");
    script.textContent = "(" + callback.toString() + ")();";
    document.body.appendChild(script);
  }, false);
  document.body.appendChild(script);
}

function main() {
  //ここに処理を書く
  alert("There are " + $('a').length + " links on this page.");
}

addJQuery(main);

こちらは動きました。もちろんFirefoxでも動きます。
最初のFirefoxでしか動かない版だと、すでにjQueryが読み込まれていればjQueryの読み込み処理を行わないっぽいのでよい感じなのですが、FirefoxでもChromeでも動くというのを重視することにしてみました。


コメントを投稿