Chrome Extension開発を勉強してみる (2) - background pageでWebSocket管理 -

とりあえず要件から

要件

WebSocketを使って送信されたメッセージを受信してHTML5 Web Notification?で表示する。又、サーバーがオチてる場合に再接続できる機能がある事

manifest.json

{
  "name": "background_page websocket",
  "description": "background_page websocket",
  "version": "1.0",
  "background_page": "background.html",
  "browser_action": {
    "default_icon": "icon_blue.png",
    "default_text": "background_page websocket"
  },
  "permissions": ["notifications"]
}

Chrome Extensionを開発する際にはこいつが必ず必要になる(はず)ので。WebSocketはバックグラウンドページで管理して、ブラウザアクション等をクリックした際にコネクションが切断されていた場合には再接続を行い、接続が確立している場合にはプロンプトを出してそのテキストをWebSocketでデータを送信する。んで受信したデータはNotification機能を使ってポップアップさせる(notificationsの権限が必要)

background.html

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  </head>
  <body>
    <script type="text/javascript">
var ws;

function openSocket() {
  ws = new WebSocket("ws://localhost:5000/websocket");

  ws.onopen = function() {
    chrome.browserAction.setIcon({ "path": "icon_blue.png" });
    chrome.browserAction.setBadgeText({ "text": "" });
  };

  ws.onmessage = function(e) {
    var notify = webkitNotifications.createNotification("icon_blue.png", "着信", e.data);
    notify.show();

    setTimeout(function() {
      notify.cancel();
    }, 3000);
  };

  ws.onclose = function(e) {
    ws = undefined;

    chrome.browserAction.setIcon({ "path": "icon_red.png" });
    chrome.browserAction.setBadgeText({ "text": "!" });
  };
}

(function() {
  openSocket();

  chrome.browserAction.onClicked.addListener(function() {
    if (ws === undefined) {
      openSocket();
    } else {
      if (ws.readyState === 1) {
        ws.send(prompt("send text"));
      }
    }
  });
})();
    </script>
  </body>
</html>

で接続されているかされてないかの状態をブラウザアクションのアイコンを変えて且つ、ブラウザアクションのBadgeにテキスト(ここでは「!」が使われている)を設定する