Firefox の WebExtension で簡単なローカルストレージを使う方法

• 概要
• 環境
• manifest.json
• main.js
• 最後に

概要

Firefox の Webextension で設定内容などを保存したい場合にはブラウザのローカルストレージが使えます
特にクラウドでデータを連携する必要がない場合などは簡単かつ軽量に使えるので便利です
今回は簡単な使い方を紹介します

環境

• macOS 10.13.6
• Firefox 62.0

manifest.json

• vim manifest.json

{
  "manifest_version": 2,
  "name": "Local storage demo",
  "version": "1.0",
  "description": "Store and save your data in local storage",
  "icons": {
    "48": "icons/border-48.png"
  },
  "background": {
    "scripts": ["main.js"]
  },
  "permissions": [
    "storage"
  ]
}

permissions.storage が必要になります

main.js

• vim main.js

browser.storage.local.get("config", function(value) {
  if (value.config === undefined) {
    browser.storage.local.set({
      config: {
        count: 1
      }
    });
  } else {
    var c = value.config.count;
    c++;
    console.log(c);
    browser.storage.local.set({
      config: {
        count: c
      }
    });
  }
});

あまり良いサンプルじゃないかもしれません、、
ローカルストレージからのデータの取得は browser.storage.local.get で行います
ローカルストレージへのデータの保存は browser.storage.local.set で行います

データは JSON 形式で保存します
そして取得するときも JSON になるのでキーをドットでつないで参照します
初回はデータがなく undefined になるので、その場合は初期化する処理を書いています

今回のサンプルの場合 extension を読み込むたびにカウントアップしていくサンプルになります
about:debugging の画面でデバッグ画面を開いて何度も最読み込みするとカウントアップするのがわかると思います
普通はオプション画面などで使うと思います
ちなみにオプション画面は manifest.json に options_ui を定義することがで実現できます

"options_ui": {
  "page": "options.html"
}

この HTML 内で更に js ファイルを参照してそこで browser.storage.local.set を呼ぶ感じです
こうすることでページやタブを跨いでもデータを横断して参照することができるようになります

最後に

Firefox の Webextension でローカルストレージを使ってみました
データは extension が削除されたりユーザがブラウザのキャッシュ情報などを意図的に削除するとなくなります

用途してはテンポラリー的な感じかなと思うので重要なデータなどはクラウドストレージなどと連携すると良いと思います
storage.sync などを使えば Firefox Account 同士でデータを共有することができます
ただその場合は認証なども必要になるので少し大変な実装になるかとは思います