Chrome の console で jQuery を使いたい

Web開発者たるもの、Webブラウジング中にちょっとDOM要素を弄りたくなって「Chrome のconsoleでjQueryが使えたら楽なのに」と思うことがあります。もし見ているWebページが http://www.takkyuuplayer.com/ のようにjQueryをインポートしているのであればconsole上でもjQueryを使うことができますが、そうでない場合は使えません。

そのようなときは Include jQuery in the Javascript Console - Stack Overflow のようにしてjQueryを入れれば良いのですが・・・

	var jq = document.createElement('script');
	jq.src = "//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js";
	document.getElementsByTagName('head')[0].appendChild(jq);
	jQuery.noConflict();

view raw load-jQuery.js hosted with ❤ by GitHub

この方法には致命的な欠点があります。それは

• 常に同じバージョンのjQueryが使えるわけではない
• そもそもインポート用のスクリプトを覚えられない

ことです。すでに閲覧中のサイトがjQueryをインポートしている場合「サイトのjQueryを使う」か「新しくｊQueryをインポートしてサイト上のｊQueryを上書きする」かの二択を迫られてしまいます。

どちらもやりたくはないので、既存のjQueryは置き換えずにいつも同じjQueryを使うためのChrome拡張を作りました。chebo.crxをインポートすればconsole上にて、次のようにしてjQueryにアクセスできます。

	console.log($); // $ is object original site object
	withChebo(function() {
	console.log($); // $ is imported jQuery
	})
	console.log($); // $ is object original site object

view raw withChebo.js hosted with ❤ by GitHub

withCheboの引数として関数を渡してやれば、その中でjQueryが使えるようになります。便利ですね。

Underscore.jsやBackbone.jsも使えるようになっているので、ちょいちょいウェブブラウジング中にDOM要素を弄りたくなる方は使ってみてください