Chrome Extension開発を勉強してみる (16) - chrome.extension.connect -

chrome.extension.connectを使って、chrome.extension.sendRequestやonRequest等と同様な事をやってみる

動作的にはpopup側でボタンを用意してそれをクリックしてbackground.js側に処理させて、そして結果をpopup側に返すという単純な事

manifest.json

{
  "name": "test",
  "version": "0.1",
  "manifest_version": 2,
  "browser_action": {
    "default_icon": "icon.png",
    "default_title": "test",
    "default_popup": "popup.html"
  },
  "background": {
    "scripts": ["background.js"]
  }
}

popup.html

<html>
  <body>
    <button id="btn">send</button>
    <div id="names"></div>

    <script type="text/javascript" src="popup.js"></script>
  </body>
</html>

popup.js

(function(undefined) {
  document.querySelector("#btn").addEventListener("click", function() {
    var port = chrome.extension.connect({ "name": "test" });
    port.postMessage({ "data": "hoge fuga foobar" });
    port.onMessage.addListener(function(res) {
      var h = document.createElement("h2");
      h.innerText = res.name;

      document.querySelector("#names").appendChild(h);
    });
  });
})();

background.js

(function(undefined) {
  chrome.extension.onConnect.addListener(function(port) {
    port.onMessage.addListener(function(req) {
      req.data.split(" ").forEach(function(name) {
        port.postMessage({ "name": name.toUpperCase() });
      });
    });
  });
})();

てな感じ。雑な説明ですら省略しましたが、別コード見りゃ大体どういう事をするのかわかるはずなので。で結果的にいうとchrome.extension.connectとchrome.extension.onRequest及びsendRequestと何が違うのかっていう所なんだと思うのですが、Developer Toolで見た所だと後者なchrome.extension.sendRequest等が内部的にchrome.extension.connectを使っている。

つまりはchrome.extension.sendRequest等はchrome.extension.connectを簡略化して書くコードを減らせれるようなAPIなんじゃないのかって思ったのですが