Chrome Extension開発を勉強してみる (4) - onRequest+sendRequest -

2012-06-06T00:00:00+00:00 Chrome Extension JavaScript

chrome.extension.onRequestとchrome.extension.sendRequestを使って見る

manifest.json

{
  "name": "test",
  "description": "test",
  "version": "1.0",
  "background_page": "background.html",
  "browser_action": {
    "default_icon": "icon.png",
    "default_text": "test",
    "popup": "popup.html"
  }
}

background.html

<html>
  <body>
    <script type="text/javascript">
(function() {
  chrome.extension.onRequest.addListener(
    function(req, sender, res) {
      res(req.message.toUpperCase());
    }
  );
})();
    </script>
  </body>
</html>

chrome.extension.onRequest.addListenerを使う事でsendRequestによるイベント処理をキャッチ出来る模様。引数は

  • reqがsendRequestの第2引数 (第1引数はエクステンションIDになる。同一上のエクテンションであれば第1引数は省略できる)
  • senderはsendRequestをされた所のMessageSenderオブジェクト(らしい)。それにidプロパティにエクステンションIDが格納されていたりする (chrome.app.getDetailsでも可能っぽい)
  • resはsendRequestで指定した第3引数のコールバックが指定されるっぽい。sendRequestで指定しなかったらundefinedになる模様 (追記にて訂正)

popup.html

<html>
  <body>
    <button onclick="send()">send</button>
    <script type="text/javascript">
function send() {
  chrome.extension.sendRequest({ "message": "hoge" }, function(res) {
    alert(res);
  });
}
    </script>
  </body>
</html>

backgroud.html部でも書いた通りだけど、エクステンションIDな引数は省略している。なので今回のは同一の拡張でのやり取りになる模様

でコールバックな引数を指定しているのでbackground.htmlでのresな部分はこのコールバックが渡される。なのでこれボタンをクリックするとbackground.html側ではtoUpperCaseをされた結果がこのコールバックに返ってくる。それをalertしてるだけ

追記

若干気になったのはBackground Page側でsetTimeoutしといて、その間にBrowser Actionなpopupを閉じているとBackground PageからsendRequest元へのコールバックによる返還がfailしているような気がする。なんかWebWorkerが云々な感じがするんだけれども

追記 (訂正に関して)

chrome.extension.onRequest等の第3引数はコールバックと明記しましたが、実際にはコールバックはPortを介してコールバックされるようです

https://groups.google.com/group/chrome-api-developers-jp/browse_thread/thread/80b45919bb86f9a0

にて議論がありますが、恐らくはonRequestでも同様かと思われる。でMLでも言われてますが、setTimeoutをする場合にはreturn trueをしないとPortな部分は開放されている為に、そのまま実行しようとするとエラーになる模様です

Media Queryで云々 Chrome Extension開発を勉強してみる (3) - 右クリック拡張でTwitter intent -