jQuery 3 系注入用ブックマークレット

各種 jQuery の使われていないサイト上で Developer Console を使って jQuery でゴニョゴニョしたい場合などがときどきあると思う。あるよね？

jQuery 注入コード

これを Console で実行すれば jQuery が注入される。

(function(){
  if(window.jQuery){
    console.log("jQuery " + jQuery.fn.jquery + " already exists.");
    return;
  }
  var script = document.createElement("script");
  script.src       = "https://code.jquery.com/jquery-3.1.0.min.js";
  script.integrity = "sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=";
  script.setAttribute("crossorigin", "anonymous");
  script.onload = function(){
    window.jQuery = jQuery.noConflict();
    console.log("jQuery " + jQuery.fn.jquery + " injected.");
  };
  document.body.appendChild(script);
})();

ブックマークレット

いちいちコードコピって実行するのはめんどくさいのでブックマークレットを作っておくと良い。

jQuery injection
↑ とりあえずこれをブックマークバーなどにドラッグ＆ドロップするとメニューができます。

注入後の使用例

※他ライブラリとバッティングしないように「$」ではなく「jQuery」でアクセスすること。

使用例

var a = $('div'); // NG
var b = jQuery('div'); // OK

参考

• jQuery CDN
• jQuery.noConflict() | jQuery API Documentation
• Bookmarklet Crunchinator
• ブックマークレットで jQuery を使う魔法の 210 文字 - Qiita