更新日: 2015年1月21日
Chrome Extension

chrome.runtime.sendMessageでメッセージ通信

chrome.runtime API を使うと、background page からデータを取得したり、イベントを listen してレスポンスを返したりできます。chrome extension（chrome拡張）の開発において、chrome.runtime.sendMessage() の API を使って、content scripts から background.js を通して runtime にイベントハンドラを登録する例です。

【お知らせ】英単語を画像イメージで楽に暗記できる辞書サイトを作りました。英語学習中の方は、ぜひご利用ください！

画像付き英語辞書 Imagict | 英単語をイメージで暗記
【開発記録】
英単語を画像イメージで暗記できる英語辞書サービスを作って公開しました

chrome.runtime.sendMessage()

content_script.js

chrome.runtime.sendMessage({
    type: "hello",
    text: "Taka"
  },
  function (response) {
    if (response) {
      alert(response);
    }
  }
);
// => Hello, Taka

chrome.runtime.sendMessage({
    type: "night",
    text: "Mike"
  },
  function (response) {
    if (response) {
      alert(response);
    }
  }
);
// => Good night, Mike

chrome.runtime.sendMessage({

type: "hello",

text: "Taka"

function (response) {

if (response) {

alert(response);

}

);

// => Hello, Taka

chrome.runtime.sendMessage({

type: "night",

text: "Mike"

function (response) {

if (response) {

alert(response);

}

);

// => Good night, Mike

上記のように、任意の箇所で chrome.runtime.sendMessage() でメッセージを送信する（リクエストを送る）。この時、第一引数に、ハッシュ形式で送信するデータを指定、第二引数にコールバックを指定。第二引数のコールバックの引数（response）に、戻ったレスポンスの結果が入るので、content script 側で任意の処理を行う。ここでは、単に alert させてます。

chrome.runtime.onMessage.addListener()

続いて、background.js ではリクエストを待ち受けてイベントハンドラを addListener します。chrome.runtime.onMessage.addListener() を使う。

background.js

chrome.runtime.onMessage.addListener(
  function (request, sender, sendResponse) {
    switch (request.type) {
    case "hello":
      hello(request.text, sendResponse);
      break;
    case "night":
      night(request.text, sendResponse);
      break;
    default:
      console.log("Error: Unkown request.")
      console.log(request);
    }
  }
);

function hello(name, callback) {
  callback("Hello, " + name);
}

function night(name, callback) {
  callback("Good night, " + name);
}