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


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

前回は今見ているページのクリックした要素のテキストを取得しアラートに表示する、というものでしたがアラートだと見辛いのでポップアップページに表示してみましょう。
ポップアップページに表示するにはコンテンツスクリプト → という通信は行えないため、コンテンツスクリプト → → ポップアップページ で、一旦バックグラウンドページを仲介して通信を行う必要があります。

ポップアップページはポップアップアイコンをクリックすることで見ることができます。
因みにポップアップページをデバッグする際は、ポップアップアイコンで右ボタンをクリックしてコンテキストメニューから「ポップアップを検証」でディベロッパーツールを開くことができます。

まずポップアップページを用意します。
ポップアップページを使うには「manifest.json」ファイルに宣言を追加する必要があります。
ポップアップアイコンも「manifest.json」で指定します。

以下のようになります。

{
	"manifest_version": 2,
	"name": "sample6",
	"description": "sample description",
	"version": "1.0",
	"browser_action":
	{
		"default_icon"	: "icon128.png",
		"default_title"	: "Scrap Book",
		"default_popup"	: "popup.html"
	},
	"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"
	  ]
}

「browser_action」にポップアップページを使うので「popup.html」と追加しました。
「manifest.json」「manifest.json」で使う名前はなんでも構いません。
ただし、そのファイルが指定フォルダにない場合はエラーとなります。

では、「popup.html」の中身ですが、これはシンプルに行きましょう。

<!doctype html>
<html lang="jp">
<head>
	<meta charset="UTF-8">
	<title>PopUp Document</title>
	<script src="jquery-2.1.4.min.js"></script>
	<script src="popup.js"></script>

	<style type="text/css">
	.site-info
	{
		background-color: #E6E6E6;
	}
	#scrapbook
	{
		width: 800px;
	}

	</style>


</head>
<body>

<div id="scrapbook"></div>

</body>
</html>

ポイントは前回のバックグラウンドページ同様、「manifest.json」で宣言していないjqueryファイルは一旦「popup.html」を作り、そこから呼び出しています。ヘッダー内に「jquery-2.1.4.min.js」と「popup.js」を読み込むことを記述しています。
流れとしてはコンテンツスクリプトでクリックして取得したテキストを、バックグラウンドページを通じ、ポップアップページに渡し「<div id=”scrapbook”></div>」のインナーHTMLに追加していきます。

「popup.js」は以下のようになります。

$(function(){

	//バックグラウンドの$scrap_text 変数にアクセスする
	var $scrap_text = .extension.getBackgroundPage().$scrap_text;

	//スクラップテキストを書き換える
	$( '#scrapbook' ).html( $scrap_text );

});

ポイントはポップアップからバックグラウンドページへの通信は「chrome.extension.getBackgroundPage()」というAPIメソッドが用意されており、簡単に行えることです。その逆は残念ながら簡単には行きません。

サンプルでは「background.js」内のグローバル変数「$scrap_text」を取得しています。
メソッド(関数)も取得できます。

chrome.extension.getBackgroundPage().$scrap_text;

とするだけで「background.js」内で制限されたグローバル変数(varを付けない変数)にアクセスができます。便利ですね!
では、「background.js」はどうなっているかというとこうなっています。

//メッセージを受信する
chrome.runtime.onMessage.addListener( function( $O_req , sender , sendResponse )
{
	//スクラップするなら
	if( $O_req.cmd == "scrap" )
	{
		var $text		= $O_req.text;
		var $site_name	= $O_req.site_name;
		var $url		= $O_req.url;

		//コンテンツスクリプトに応答を返す
		sendResponse(
		{
			cmd		: "test_ok",
		});

		//整形する
		$text = $text + "<br><div class='site-info'>" + "サイト名 " + $site_name + " : <a href='" + $url + "' target='_blank'>" + $url + "</a><hr></div>\n";

		//ポップアップに受け渡し用のグローバル変数に代入
		$scrap_text = $text + $scrap_text;
		console.log( $scrap_text );

	}

});

});

コンテンツスクリプトから取得したテキストを整形した後に、グローバル変数に渡しています。

最後にコンテンツスクリプトの「script.js」は以下のようにします。

関連記事