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

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

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

スポンサーリンク

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

次に 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

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

chrome.storage.sync.get() の第一引数には、1つの 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 のキーが foo の値が変更されたら、someProcess() を実行するコールバックを addListener しています。

色々使ってみて、localStorage よりも chrome.storage のほうが何かと取り回しが良いです。今後は chrome.storage を使っていこうと思います。

スポンサーリンク
スポンサーリンク
 
Twitterを使っていますのでフォローお願いたします!ブログの更新情報もつぶやいてます^^
(英語学習用)
  • 2件のコメント
  • 匿名

    解りやすい!
    ストレートに情報が伝わってきます。

    • taka

      ありがとうございます^^

Leave Your Message!