更新日: 2015年1月7日
Chrome Extension

chrome.storageでchrome extension用のデータを保存・取得

昨日のエントリーで、Google Chrome Extension（拡張機能）の設定値の保存と取得に、localStorage を利用する方法を書きました。

Chrome Extensionでoptions_pageで設定したlocalStorageの値をcontent_scriptsから読み込む | EasyRamble

【お知らせ】英単語を画像イメージで楽に暗記できる辞書サイトを作りました。英語学習中の方は、ぜひご利用ください！

画像付き英語辞書 Imagict | 英単語をイメージで暗記
【開発記録】
英単語を画像イメージで暗記できる英語辞書サービスを作って公開しました

chrome.storage の API を使う

localStorage を使うとこれはこれで動くのですが、もう少し扱いやすい方法がないか調べたところ、chrome.storage という localStorage に似た方法を見つけました。

chrome.storage – Google Chrome

localStorage の場合、background.js を通して Message Passing でデータのやり取りを行う必要がある。

これに対し chrome.storage では background.js なしで、ダイレクトに content_scripts 等から chrome.storage のデータにアクセスできます。また、chrome.storage.onChanged.addListener の API で、データ変更に対するコールバックを簡単に登録できて便利。

以下、chrome.storage を使う手順です。

chrome.storage にデータ保存

最初に、chrome.storage にデータを保存する方法です。まずは、manifest.json で storage 利用を許可します。

manifest.json

{
  "permissions": [
    "storage"
  ]
}

{

"permissions": [

"storage"

]

}

次に content scripts, background page, options page など任意の JavaScript 内で、chrome.storage.sync.set() を使って chrome.storage にデータを保存します。

以下 options_page（options.js）で、フォームで設定された値を chrome.storage に保存する例。foo, bar, baz という名前のラジオボタンが options.html にあるとします。options.html から options.js を読み込んでいる前提で、コードは jQuery 利用です。以下のようなコードを、options.html のボタンのクリックイベントなどで実行する。

options.js

var foo_val = $("input[name='foo']:checked").val();
var bar_val = $("input[name='bar']:checked").val();
var baz_val = $("input[name='baz']:checked").val();
var formOptions = {
  foo: foo_val,
  bar: bar_val,
  baz: baz_val
});
chrome.storage.sync.set(formOptions, function(){});

var foo_val = $("input[name='foo']:checked").val();

var bar_val = $("input[name='bar']:checked").val();

var baz_val = $("input[name='baz']:checked").val();

var formOptions = {

foo: foo_val,

bar: bar_val,

baz: baz_val

});

chrome.storage.sync.set(formOptions, function(){});

chrome.storage.sync.set() にハッシュ形式のオブジェクトを第一引数として渡します。第二引数は、保存した後に何かしら処理を行うコールバック関数。これで、chrome.storage に foo, bar, baz というキーでそれぞれの値が保存されます。

chrome.storage.sync.set() の sync の部分は Properties と呼ばれるそうで、他に local, managed が使える。sync は Chrome Sync で同期されるストレージエリアです。詳細はドキュメントを参照。

chrome.storage からデータ取得

content scripts, background page, options page など任意の JavaScript 内で、chrome.storage.sync.get() を使って chrome.storage のデータを取得できます。

content_script.js

var defaults = {
  foo: "foo",
  bar: "bar",
  baz: "baz"
});

chrome.storage.sync.get(
  defaults,
  function(items) {
    someProcess(items.foo, items.bar, items.baz);
  }
);

var defaults = {

foo: "foo",

bar: "bar",

baz: "baz"

});

chrome.storage.sync.get(

defaults,

function(items) {

someProcess(items.foo, items.bar, items.baz);

}

);

chrome.storage.sync.get() の第一引数には、１つの key か key の配列、または key-value（ハッシュ形式）でデフォルト値を特定したオブジェクトを指定する。上記の例では、defaults でデフォルト値を指定した key-value のオブジェクトを渡しています。

第二引数はコールバック関数で、この引数（items）に chrome.storage から取得したデータが、key-value 形式のオブジェクトとして入ります。後は、items.key としてデータを取り出して何か処理を行う。

chrome.storage のデータ変更に対するコールバック登録

chrome.storage.onChanged.addListener() を使うと、chrome.storage のデータを監視して、データに変更があったら何かしら処理を行うコールバックを登録できます。これも、content scripts, background page, options page など任意の JavaScript 内で利用できる。

content_script.js

chrome.storage.onChanged.addListener(function(changes, namespace) {
  if (namespace == "sync") {
    if (changes.foo) {
      someProcess(changes.foo.newValue);
    }
  }
});