Chrome拡張機能でオプション画面を作ってみる（content_scripts版）

JavaScript

Chrome拡張機能でオプション画面を作ってみる
の続き

設定されたオプションをcontent_scriptsで参照してみる。

サンプルプログラム

オプション画面で設定されたlocalStorageの値は
content_script側から直接参照できないので（なんでかよく分かってない）
メッセージでやりとりして取得する。

manifest.json
{
  "name": "Sample Extension",
  "version": "0.0.1",
  "manifest_version": 2,
  "description": "拡張機能のサンプルです",
  "background": {
    "scripts": ["background.js"]
  },
  "content_scripts": [
    {
      "matches": ["http://d.hatena.ne.jp/*"],
      "js": ["content_script.js"]
    }
  ],
  "options_page": "options.html"
}
background.js
// ローカルストレージを取得するメッセージを受け付ける
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
  if (request.action === "getLocalStorage"){
    sendResponse(localStorage);
  }
});
content_script.js
// ローカルストレージを取得するメッセージを送信し、
// 取得したメッセージをalertする。
chrome.runtime.sendMessage({action: "getLocalStorage"}, function(response) {
  if (response["message"]) {
    alert(response["message"]);
  } else {
    alert("Hello, world!");
  }
});
options.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="jquery-1.11.1.min.js"></script>
    <script src="options.js"></script>
  </head>
  <body>
    メッセージ：
    <input id="message" type="text">
    <br>

    <input id="save" type="button" value="保存">
  </body>
</html>
options.js
$(function(){

  // セーブボタンが押されたら、
  // ローカルストレージに保存する。
  $("#save").click(function () {
    localStorage["message"] = $("#message").val();
  });

  // オプション画面の初期値を設定する
  if (localStorage["message"]) {
    $("#message").val(localStorage["message"]);
  }
  
});

確認

はてなダイアリーのページに行くと、アラートが表示される。

オプション画面でメッセージを設定すると、

設定されたメッセージが表示される。