この記事はブロックされています。続きを読みたい方はログインをして下さい。会員ではない方は新規会員登録をして下さい。


Google Chrome Extention講座 第六回「バックグラウンドと通信する1」

前回は今見ているページにレイヤーを追加しましたが、今回はバックグラウンドと通信を行います。
実はChrome Extentionにはスクリプトの制約があり、主に4つのパートに分かれています。

・コンテンツスクリプト
・バックグラウンドページ
・ポップアップページ
・オプションページ
(Chromeの設定 → 拡張機能→各拡張機能の [ オプション ] )

今までやってきた、今見ているページを操作するのが「content_scripts(コンテンツスクリプト)」と言います。

コンテンツスクリプトは今見ているページの要素(DOM)をあたかも自分のサイトのように操作ができますが、ajax通信やデータの保存、タブ間データのやりとり、コンテキストメニュー(右ボタンで表示されるメニュー)の拡張、ポップアップ、オプションページといったものは操作できません。

この辺、混乱しやすいところなのですが、セキュリティの都合上できなくなっています。
そこでどうするかというと、例えばコンテンツスクリプトのデータをオプションページで保存したい場合は、バックグラウンドページを介してオプションページに送り通信を行います。

逆にオプションページに保存した設定を読み込む場合は、バックグラウンドページを介してコンテンツスクリプトに読み込みます。これはポップアップページも同様です。
要するにバックグラウンドページを一枚噛ませて通信をする、と覚えて下さい。

また後ほどやりますが、拡張機能をインストールすると右上にアイコンが出ることがありますが、これはクリックするとポップアップが表示されます。これをブラウザでアクションさせるのでブラウザアクションと呼びます。右ボタンを押すと表示されることがあるコンテキストメニューの操作もブラウザアクションです。

もう1つ「ページアクション」と呼ばれるものがあり、こちらは特定のURLを開くてURL欄にアイコンを表示させて、クリックすることでアクションを起こすというものです。
Chrome拡張のほとんどがブラウザアクションかと思います。

因みにポップアップページもオプションページもHTMLとCSSとJacaScriptで作るので、自分だけのオリジナルのデザインにすることができます。

では今回はクリックした要素の中にテキストがあったら、バックグラウンドページと通信してアラートで追加していく、というスクリプトを作ってみます。ページを移動してもバックグラウンドのデータは生きているためクリックされたテキストが追加されていきます。

まずはクリックした要素を取得するコードです。
「script.js」を以下のようにします。「manifest.json」は前回のままです。

$( function()
{
	//ページ中の何かをクリックしたら
	$( document ).on( 'click' ,  function( $O_obj )
	{
		//クリックした要素のテキストを取得する
		var $text = $O_obj.target.innerText;

		//クリックしたタグをアラート表示
		alert( $O_obj.target.nodeName );

		//取得したテキストをアラート表示
		alert( $text );

		//ついでにコンソールログにも出力しておく
		console.log( $text );

	});

});

これでクリックしたタグ名とそこにテキストが含まれていればテキストがアラートで表示されます。
次にこれをバックグラウンドページに送信する方法ですが、「manifest.json」を書き換える必要があります。
以下のように書き換えます。

{
	"manifest_version": 2,
	"name": "sample5",
	"description": "sample description",
	"version": "1.0",
	"browser_action":
	{
		"default_icon": "icon128.png"
	},
	"content_scripts": [
		{
		  "matches": [
			"http://*/*",
			"https://*/*"
		  ],
		  "js": [ "jquery-2.1.4.min.js" , "script.js" ],
		  "css": [ "style.css" ] 
		}
	],
	"background": {
		"page": "background.html"
	},
	"permissions": [
		"tabs",
		"https://*/*",
		"http://*/*",
		"storage"
	  ]
}

そして、新たに「background.html」と「background.js」を追加します。
ここで注意しなければならないのは、「background.js」でjqueryなどのフレームワークを使う場合は、直接呼び出せないため、一旦「background.html」を作って、そこから呼び出すことです。
コンテンツスクリプトではjqueryが直接呼び出せたのですが、バックグラウンドではエラーとなってしまうので気を付けてください。

「background.html」は以下のようにします。

<!doctype html>
<html lang="jp">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="jquery-2.1.4.min.js"></script>
	<script src="background.js"></script>
</head>
<body>
<div id="temp" data-test=""></div>
</body>
</html>

「background.js」は以下のようにします。

$(function(){

//メッセージを受信する
chrome.runtime.onMessage.addListener( function( $O_req , sender , sendResponse )
{
	//コンソールログに表示
	console.log( "バックグラウンドです" );

	//テスト通信する
	if( $O_req.cmd == "test" )
	{
		var $text = $O_req.text;

		//コンソールログに表示
		console.log( "バックグラウンドです2" );

		//background.htmlのデータ属性を読み込む
		var $old_text = $( '#temp' ).data( 'test' );

		//前回のデータを追加する
		$text = $text + "\n" + $old_text;

		//追加したものをデータ属性に保存する
		$( '#temp' ).data( 'test' , $text );

		//応答を返す
		sendResponse(
		{
			cmd		: "test_ok",
			text	: $text
		});
	}

});

});

最後に「script.js」を書き換えます。

$( function()
{
	//ページ中の何かをクリックしたら
	$( document ).on( 'click' ,  function( $O_obj )
	{
		//クリックした要素のテキストを取得する
		var $text = $O_obj.target.innerText;

		//クリックしたタグをアラート表示
		alert( $O_obj.target.nodeName );

		//取得したテキストをアラート表示
		alert( $text );

		//ついでにコンソールログにも出力しておく
		console.log( $text );


		//バックグラウンドにデータを送信する
		chrome.runtime.sendMessage(
		{
			cmd		: 'test' ,
			text	: $text
		},
		//通信が成功した時の処理
		function( $O_res )
		{

			//バックグラウンドから返ってきたデータを取得する
			if( $O_res.cmd == "test_ok" )
			{
				var $text	= $O_res.text;

				//テキストをアラート表示
				alert( $text );
			}

		});

	});

});

コメントを付けておいたので分かりやすいと思います。
通信するためのポイントは「chrome.runtime.onMessage.addListener」と「chrome.runtime.sendMessage」という2つのメソッドです。これはChrome独自のメソッドとなっています。

関連記事