Hatena::ブログ(Diary)

yk5656 diary

記事一覧: Linux | Ansible | Swift | Ruby | PHP | JavaScript | MySQL | Git | Vim

2014-10-11(土)

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);
  }
  
});


確認

アイコンを右クリックして「オプション」メニュー
または
拡張機能のページの「オプション」リンク
からオプション画面が開ける。
f:id:yk5656:20141103122448p:image:w600

最初は何も設定されておらず、
f:id:yk5656:20141103122447p:image

アイコンをクリックすると、
「Hello, world!」のメッセージが表示され、背景色は設定されていない。
f:id:yk5656:20141103122446p:image


オプション画面で設定すると、
f:id:yk5656:20141103122445p:image

設定が反映される。
f:id:yk5656:20141103122444p:image