Chrome拡張機能を作ってみる | 3. データ保存(chrome.storage)

Chrome拡張で設定などデータを保存したいときに、
どうすればいいかを調べてみたときの備忘録。

オプションに関しては、このあたりから読みはじめるとよさそう。

• Give users options - Chrome Developers

データ保存はchrome.storage

• chrome.storage - Chrome Developers

保存先にはいくつか種類があるので、
保存する内容や用途に応じて選択する必要がある。

• local .... 暗号化なし/localのみ/約5MBまで
• sync ... 暗号化なし/ログインアカウントで同期/約100KBまで
• sesssion ... メモリ上のみ

権限

権限にstorageを付ける必要がある。

{
  "name": "My extension",
  ...
  "permissions": [
    "storage"
  ],
  ...
}

使い方: 読み書き

chrome.storage.local.set({ key: value }).then(() => {
  console.log("Value is set to " + value);
});

chrome.storage.local.get(["key"]).then((result) => {
  console.log("Value currently is " + result.key);
});

使い方: 変更の検知

• background.jsなどでstorageの変更をlistenできる

chrome.storage.onChanged.addListener((changes, namespace) => {
  for (let [key, { oldValue, newValue }] of Object.entries(changes)) {
    console.log(
      `Storage key "${key}" in namespace "${namespace}" changed.`,
      `Old value was "${oldValue}", new value is "${newValue}".`
    );
  }
});

storageのスキーマ

• JSON Schemaを定義しておくことでChromeにvalidationしてもらえる
• Manifest for storage areas - Chrome Developers

{
  "name": "My enterprise extension",
  "storage": {
    "managed_schema": "schema.json"
  },
  ...
}

以上!!