Chrome拡張開発入門の次に読む記事…？ - なんとなく開発日記(仮)

注：未完結の記事です。「これはどうやって実装するの！？」というリクエスト、お待ちしています。

この記事では、主に、「Chrome拡張開発してみたい！とりあえずHelloWorldはできたよ！でも、こういう動作をさせる方法がわからない！！」という方を対象にしています。
※HelloWorldまでの習得は、こちらのサイトが大変わかりやすいと思います。

ほかのサイトで詳しく解説されていることに関しては、そのサイトに丸投げしてしまっています。すみません…。
分からない関数等がありましたら、こちらで調べてみてください。

もくじ
1.選択したテキストを取得する。

ポップアップから、選択部分を取得する

ここは僕も非常に苦戦しました。ポップアップから

	window.getSelection().toString();

を実行しても、返ってくるのは「ポップアップ内での選択部分」で、表示しているページの選択部分は返ってきません。
ここで、メッセージというものを使用します。

具体的なコード例です。

background.html

	var callbacks = [];

	function getSelection(callback) {
		chrome.tabs.getSelected(null, function(activeTab) {
			if (activeTab.url.indexOf('https://') >= 0) {
				callback(null); 
			} else {
				callbacks.push(callback); 
				chrome.tabs.executeScript(null, { file: "content_script.js" }); 
			}
		});
	};

	chrome.extension.onRequest.addListener(function(request) { 
		var callback = callbacks.shift();
		callback(request); 
	});

content_script.js

	chrome.extension.sendRequest({ "text": window.getSelection().toString() });

popup.html

	var bg = chrome.extension.getBackgroundPage();
	bg.getSelection(function(selection) {
		// selection.text に選択部分が入っているので、それを使ってｺﾞﾆｮｺﾞﾆｮ…(ﾉﾟдﾟ(;￣Д￣)ｺﾞﾆｮｺﾞﾆｮ…(ﾉﾟдﾟ(;￣Д￣)する
	});

ソースコードの説明
1.[background.html]getSelectionが呼び出されたとき、現在表示しているタブの情報を取得し、保護されているページかどうかを判断。*1
2.[background.html]保護されていなければ、content_script.jsを、表示しているタブに注入。
3.[content_script.js]ウィンドウの選択部分を取得し、background.htmlに送る。
4.[background.html]getSelectionの引数のコールバック関数に、content_script.jsから送られてきたデータを渡す。
5.送られてきたデータをごにょごにょする。

以上が選択部分を取得する基本的な流れです。
popup.htmlは何をしてるんだ！！という意見があると思います。そういう方はこちらをどうぞ。

参考にさせていただいたサイト
この説明でわからなければ、上記のサイトを参照していただくことを推奨します。
こちらのスクリプトは、上記のサイトのスクリプトで、特に重要な部分を抜き出したものです。

*1:保護されているページの場合、そのあとのexecuteScriptが使用できないため。