ChromeExtensionの作り方４週目は、２週目で説明したpopupと３週目で説明したContent Scriptを連携させる方法です。
お互いに違うhtmlを開いているので、データを連携させるには特別なAPIが必要となるのです。
今回はChrome.API.tabsというAPIを使います。
そのため、manifest.jsonにpermissionというものを設定しましょう。
[javascript]
{
"manifest_version": 2,
"name": "sample",
"description": "タイトルとURLを取得",
"version": "1.0",
"permissions": ["tabs"],
"content_scripts": [
{
"matches": ["https://*/*"],
"js": ["jquery-2.0.3.min.js", "content.js"]
}
],
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
}
}
[/javascript]
そして見ての通り、content_scripts(第３回で説明)とbrowser_action(第２回で説明)の両方を入れています。
さて、まずはcontent_scripts側にイベントリスナーを設定し、browser_action側からのリクエスト待ちにします。
[javascript]
chrome.runtime.onMessage.addListener(function(msg, sender, sendResponse) {
ret = $('title').text();
sendResponse( {title:ret} );
});
[/javascript]
特に説明なくても、なんとなく見れば分かりそうなコードですかね。
titleタグの内容を返しています。
このあたり本家ドキュメントではXSS、クロスサイト・スクリプティングに注意とかしきりに書かれていますので気をつけて。
んで、browser_action側はこのように書きます。
[javascript]
chrome.tabs.query({active:true}, function(tab) {
chrome.tabs.sendMessage(tab[0].id, {text:''}, function(response) {
url = tab[0].url;
$('#place').text(response.title + ' ' + url);
});
});
[/javascript]
タブに対してクエリを発行するという関数です。
active:trueとなっているので現在選択中のタブが第二引数のコールバックに入ります。
処理内容はsendMessage、メッセージ送信です。
対象はtab[0].id、今回は選択中のタブなので一つしかありませんが複数の場合は引数を指定するなりfor文使うなりしましょ。
第二引数は渡すパラメータ、第三引数はコールバック関数。
見ての通りcontent_scriptsから受け取ったタイトルとアクティブなタブのURLをid="place"（ここには書いてないけどdivタグ）に挿入します。
これが基本的なメッセージをやり取りする方法となっているで、Chrome Extensionやってみたい方は覚えておきましょう。
今回はここまで。