Mapion マピオンラボ Javascript 【Chromeエクステンション】コンテンツスクリプトから既存ページのJSを操作する方法

【Chromeエクステンション】コンテンツスクリプトから既存ページのJSを操作する方法

Follow @honjo2

既存ページに変更を加える「コンテンツスクリプト」には、いくつか制限があります。

ChromeのAPIが使えない。（一部除く）
そのページのJSにはアクセスできない。
非同期通信できない。

非同期通信はバックグラウンドに任せればよいんですが、

JSを操作できないのはツライところです。

ただ、既存ページのコンテンツ（HTML）は共有なので、

それを使って既存ページにJSコードを埋め込めば、

お互いに操作が可能になります。

サンプル

ここにあるボタンをクリックするとJSの関数が実行されて「あいうえお」と出ます。

このJSを書き換えて「かきくけこ」と出すコンテンツスクリプトを作ってみます。

既存のページ（sample0.html）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>sample</title>
<script type="text/javascript">
var agyo = "あいうえお";
var kagyo = "かきくけこ";
window.onload = function() {
	document.getElementById("button1").addEventListener("click", clickListener, false);
};
function clickListener(e) {
	alert(agyo);
}
</script>
</head>
<body>
<input type="button" value="click" id="button1">
</body>
</html>

manifest.json

{
	"name": "sample0",
	"description": "サンプル0",
	"version": "1.0",
	"content_scripts": [
		{
		"js": [
			"content_script.js"
		],
		"matches": [
			"http://labs.mapion.co.jp/blog/honjo/html/sample0.html"
		],
		"run_at": "document_end",
		"all_frames":true
		}
	]
}

content_script.js

// 既存ページのclickListenerをオーバーライドする
function clickListener() {
	alert(kagyo); // 既存ページのkagyoを使う
}

add(clickListener);

// 既存ページに関数を追加する関数
function add(func) {
	var script = document.createElement("script");
	script.appendChild(document.createTextNode(func.toString()));
	document.body.appendChild(script);
}

このサンプルはここからインストールできます。

補足

Firefoxのユーザスクリプトだと、

コンテンツ側のグローバルがunsafeWindowという変数に格納されているので、

これで既存ページのJSを操作できます。

Chromeだと今はそういうのはなくて、完全に分離されてしまったので、

このように裏技的にやるしかないのです。

ちなみに、Chromeエクステンションが正式にリリースされる以前から

ユーザスクリプト的なものを作ったりしていますが、

以前は、Firefoxと同じようにグローバルにアクセスできる変数が容易されていました。

とあるマイナーバージョン以降、それが使えなくなって、現在に至ります。

: ニックネーム

: この記事のトラックバックURLhttp://labs.mapion.co.jp/mtos/mt-tb.cgi/39