Chrome Extensionの作り方講座その4・popupとContent Scriptを連携させてみる

Author:
chromeext4

ChromeExtensionの作り方4週目は、2週目で説明したpopupと3週目で説明したContent Scriptを連携させる方法です。
お互いに違うhtmlを開いているので、データを連携させるには特別なAPIが必要となるのです。

Chrome Extensionの作り方講座その1・用語とか
Chrome Extensionの作り方講座その2・BrowserActionを使ってみる
Chrome Extensionの作り方講座その3・ContentScriptを使ってみる
Chrome Extensionの作り方講座その5・Event Page(Background Script)を使う
Chrome Extensionの作り方講座その6・omniboxを使う
Chrome Extensionの作り方講座その7・bookmark APIを使う

今回はChrome.API.tabsというAPIを使います。
そのため、manifest.jsonにpermissionというものを設定しましょう。

{
  "manifest_version": 2,

  "name": "sample",
  "description": "タイトルとURLを取得",
  "version": "1.0",

  "permissions": ["tabs"],
  "content_scripts": [
    {
      "matches": ["http://*/*", "https://*/*"],
      "js": ["jquery-2.0.3.min.js", "content.js"]
    }
  ],
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  }
}

そして見ての通り、content_scripts(第3回で説明)とbrowser_action(第2回で説明)の両方を入れています。
さて、まずはcontent_scripts側にイベントリスナーを設定し、browser_action側からのリクエスト待ちにします。

chrome.runtime.onMessage.addListener(function(msg, sender, sendResponse) {
    ret = $('title').text();
    sendResponse( {title:ret} );
});

特に説明なくても、なんとなく見れば分かりそうなコードですかね。
titleタグの内容を返しています。
このあたり本家ドキュメントではXSS、クロスサイト・スクリプティングに注意とかしきりに書かれていますので気をつけて。

んで、browser_action側はこのように書きます。

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);
     });
});

タブに対してクエリを発行するという関数です。
active:trueとなっているので現在選択中のタブが第二引数のコールバックに入ります。
処理内容はsendMessage、メッセージ送信です。
対象はtab[0].id、今回は選択中のタブなので一つしかありませんが複数の場合は引数を指定するなりfor文使うなりしましょ。
第二引数は渡すパラメータ、第三引数はコールバック関数。
見ての通りcontent_scriptsから受け取ったタイトルとアクティブなタブのURLをid=”place”(ここには書いてないけどdivタグ)に挿入します。

これが基本的なメッセージをやり取りする方法となっているで、Chrome Extensionやってみたい方は覚えておきましょう。

今回はここまで。

Chrome Extensionの作り方講座その1・用語とか
Chrome Extensionの作り方講座その2・BrowserActionを使ってみる
Chrome Extensionの作り方講座その3・ContentScriptを使ってみる
Chrome Extensionの作り方講座その5・Event Page(Background Script)を使う
Chrome Extensionの作り方講座その6・omniboxを使う
developer.chrome.com/extensions

Share on Facebook
Pocket