2013年8月9日金曜日

Chromeアプリのオプション画面作成

Chrome Apps のオプション画面（設定画面）の作り方を紹介します。
作り方はとても簡単。手順は下の３つだけ。

  1. options.htmlを作成
  2. options.jsを作成
  3. manifest.json に "options_page" を設定

下の例は「色」情報を設定しておくオプション画面です。

options.html
<html>
<head><title>Sample App's Options page</title></head>
<body>

Favorite Color:
<select id="color">
 <option value="red">red</option>
 <option value="green">green</option>
 <option value="blue">blue</option>
 <option value="yellow">yellow</option>
</select>

<br>
<div id="status"></div>
<button id="save">Save</button>
</body>

<script src="options.js"></script>

</html>

options.js
// Saves options to localStorage.
function save_options() {
  var select = document.getElementById("color");
  var color = select.children[select.selectedIndex].value;
  localStorage["favorite_color"] = color;

  // Update status to let user know options were saved.
  var status = document.getElementById("status");
  status.innerHTML = "Options Saved.";
  setTimeout(function() {
    status.innerHTML = "";
  }, 750);
}

// Restores select box state to saved value from localStorage.
function restore_options() {
  var favorite = localStorage["favorite_color"];
  if (!favorite) {
    return;
  }
  var select = document.getElementById("color");
  for (var i = 0; i < select.children.length; i++) {
    var child = select.children[i];
    if (child.value == favorite) {
      child.selected = "true";
      break;
    }
  }
}

document.addEventListener('DOMContentLoaded', restore_options);
document.querySelector('#save').addEventListener('click', save_options);

manifest.json
{
  "name": "Sample App",
  "description": "Sample App with an Options page.",
  "version": "0.1",
  "default_locale": "en",
  "permissions": [],
  "content_scripts": [{
    "matches": ["http://*/*", "https://*/*"],
    "js": ["content_script.js"],
    "all_frames": true
  }],
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "icons": {
    "128": "128.png"
  },
  "options_page": "options.html",
  "manifest_version": 2
}

manifest.json でのポイントは、 "options_page": "options.html", の部分だけ。これだけでアプリにオプション画面が追加されます。

オプション画面の呼び出し


拡張機能をインストールして、 chrome://extensions/ の拡張機能一覧から、今作ったアプリの オプション リンクをクリックすればオプション画面が開きます。

オプション画面で設定した情報(今回で言えば 色情報 "favorite_color")は、ブラウザの localStorage に保存されます。localStorageはHTML5で策定された仕様ですが、簡単にいえば Cookie の拡張版のようなものです。とてもシンプルな仕様で使いやすく、アプリの設定情報などのちょっとした情報を保存しておくのに重宝します。


重要：オプション画面でlocalStorageに保存した設定データを content script 側で使う方法


オプション画面で localStorage に保存した設定データは、残念ながら content script 側から直接使うことはできません。なぜなら、オプション画面と content script のURLはそれぞれ別物だからです。
そこで、オプション画面で設定したデータを使うには Message Passing を使います。
処理の流れとしては、
  1. content_script.js 側から sendMessage して localStorage データ取得要求
  2. background.js 側で onMessage して要求を受信し、sendResponse で返答
  3. content_script.js 側の sendMessage の引数のコールバック関数で response.data を受信
となります。下はそのサンプルコードです。

content_script.js
chrome.runtime.sendMessage({method: "getLocalStorage", key: "key1"}, function(res) {
  cosole.log(res.data);
});

background.js
chrome.runtime.onMessage.addListener(function(req, sender, sendResponse) {
  if (req.method == "getLocalStorage"){
    sendResponse({ data: localStorage[req.key] });
  } else{
    sendResponse({ }); // snub them.
  }
});


参考にしたサイト

Options - Google Chrome
Chrome extension: accessing localstorage in content script - Stack Overflow
投稿者 時刻:
ラベル: , ,

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)