🧊

いまさらまとめるChrome ExtensionでのJavaScript挿入

今さらやけど、まとめ。
注：自分用まとめのため、下記リンクとか見ていただいた方が幸せになれるかもしれません。

参考：Hello There! - Google Chrome

メッセージングとかそういった高尚な内容にも踏み込まないレベル。

最低限の構成

Chrome拡張！とは言えそんな身構える必要はなくて、最低限のファイルさえ用意すれば、ちゃんと動いてくれます。

  • manifest.json
  • (アイコン)

ほんと、最小限すぎるけどコレだけでも立派な拡張として認識してくれますｗ

manifest.json

{
	// Require!
	"manifest_version": 2,
	"name": "myEx",
	"version": "1.0",

	// Recommend.
	"description": "My first extension.",
	"icons": {
		"16": "icons/icon_16x16.png",
		"48": "icons/icon_48x48.png",
		"128": "icons/icon_128x128.png"
	}
}

どんな拡張機能かを記したjsonファイル。
これを入れたフォルダを用意するだけで、あっという間にオリジナル機能が。

参考：Formats: Manifest Files - Google Chrome

Browser Action | Page Action

これで完成！なんてわけにはいかず、こっからが本題。

だいたいのChrome Extensionはこの2種に大別されます。

Browser Action

ブラウザ右上に鎮座するアイコン群の一員になりたいならこっち。
どこのページとか関係なく、ブラウザそのものの機能を拡張したりする思想の場合はこっち。

こっちの場合のみ、バッジなるちっさいテキストの表示ができます。

Page Action

特定のページ・URL下での利用を想定する場合はこっち。
アドレスバーの右端に出るアイツです。

Browser Actionと違って、アイコンは出たり消えたりします。


どっちを選んでも「だいたい」できることは一緒。
作りたいものに対して、あるべき姿でどっちか決まるはず・・といった感じ。

JavaScriptの挿し込み方法

もちろん拡張を作るにあたって、色々目的はあるでしょうがだいたいは、
JavaScriptで見ているページを操作することがメインになると思ってます。

で、ページに対してJavaScriptをいかに埋め込むかというのが問題。
やり方としては、以下のまたしても2種。

  • Content Script
  • executeScript

Content Script

問答無用でJavaScriptを実行するならこっちのパターン。
とは言えどこのページ(URL)で実行するかどうかの指定はできる。

Googleのページでのみ実行するスクリプトを作るとすると。

manifest.json
{
	// Require!
	"manifest_version": 2,
	"name": "myEx",
	"version": "1.0",

	// Recommend.
	"description": "My first extension.",
	"icons": {
		"16": "icons/icon_16x16.png",
		"48": "icons/icon_48x48.png",
		"128": "icons/icon_128x128.png"
	},

	"content_scripts": [
		{
			"matches": ["http://*.google.co.jp/*"],
			"js": ["sample1.js", "sample2.js"]
		}
	]
}

以下2ファイルを読み込ませます。

sample1.js
var myVar = 'Pass to sample2!';
alert('Hello ' + document.title);

変数もグローバルにしておけば、

sample2.js
if(myVar){
	alert(myVar);
	document.body.style.backgroundColor = '#eeeeee';
}

拾えます。
jQueryとか使える！

そしてContent Scriptと言いつつ、Cssも読み込ませられるという。

参考：Content Scripts - Google Chrome

executeScript

Content Scriptが問答無用で実行するのに対し、こっちを使えば任意のタイミングで実行することができます。

ただし、Page ActionではなくBrowser Action限定です。(←ちょっと自信ない)
上記サンプルをこっちの方式でやる場合のサンプル。

manifest.json
{
	// Require!
	"manifest_version": 2,
	"name": "myEx",
	"version": "1.0",

	// Recommend.
	"description": "My first extension.",
	"icons": {
		"16": "icons/icon_16x16.png",
		"48": "icons/icon_48x48.png",
		"128": "icons/icon_128x128.png"
	},

	"browser_action": {
		"default_icon": "icons/icon_19x19.png"
	},
	"background": {
		"scripts": ["background.js"]
	},
 	"permissions": ["tabs", "http://*.google.co.jp/*"]
}

アイコンをクリックすると、さっきのコードが実行されます。
さっきのsample1.jsとsample2.jsは、同じディレクトリにでも入れておくだけでOK。

background.js
// Icon clicked.
chrome.browserAction.onClicked.addListener(function(tab) {
	chrome.tabs.executeScript(null,
		{file: "sample1.js"}, function(){
			chrome.tabs.executeScript(null,
				{file: "sample2.js"}, function(){
					console.log('Script injected.');
			});
	});
});

なんだコレ！なネストコードですが、こうすれば無理やり各ファイル間での変数を共有できます。
正確には、外側のスコープを参照できるって感じ。
※sample1.jsとsample2.jsは同じ内容なので割愛。

あとは

今のところPopupが必要になってないのでまとめませんが、そのうち使ってみたいと思ってたり。

そのほかはPage Actionの時にアイコンでなくてちょっと詰まったり、どうしてもデータ保存したい場合はlocalStorageとか使ったらいいよとか、だいたいのことはサンプル見れば載ってることがわかった！

参考：Sample Extensions - Google Chrome Extensions