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

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

サンプルプログラム

オプション画面は "options_page" で設定する。

manifest.json

{
  "name": "Sample Extension",
  "version": "0.0.1",
  "manifest_version": 2,
  "description": "拡張機能のサンプルです",
  "browser_action" : {
    "default_popup" : "popup.html"
  },
  "options_page": "options.html"
}

popup.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <script src="jquery-1.11.1.min.js"></script>
    <script src="popup.js"></script>
  </head>
  <body>
  </body>
</html>

popup.js

$(function(){

  // ローカルストレージに設定されているメッセージを表示する。
  // 設定されてない場合は「Hello, world!」を表示する。
  if (localStorage["message"]) {
    $("body").text(localStorage["message"]);
  } else {
    $("body").text("Hello, world!");
  }

  // ローカルストレージに背景色が設定されている場合は、
  // 背景色を変更する。
  if (localStorage["bgcolor"]) {
    $("body").css('background-color', localStorage["bgcolor"]);
  }

});

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>

    背景色：
    <select id="bgcolor">
      <option value="">未設定</option>
      <option value="red">赤</option>
      <option value="green">緑</option>
      <option value="blue">青</option>
    </select>
    <br>

    <input id="save" type="button" value="保存">
  </body>
</html>

options.js

$(function(){

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

  // オプション画面の初期値を設定する
  if (localStorage["message"]) {
    $("#message").val(localStorage["message"]);
  }
  if (localStorage["bgcolor"]) {
    var bgcolor = localStorage["bgcolor"];
    $("#bgcolor option[value=" + bgcolor + "]").attr("selected", true);
  }
  
});