概要

これは初心者のブラウザ拡張機能 Advent Calendar 2024の11日目の記事です。

拡張機能の設定ページを作る方法を記載します。

設定ページとは？

以下ページに記載されているようにアドオンマネージャーのオプションページを指します。

オプションページ

オプションページの設定方法

必要なファイル

ファイル	用途
htmlファイル	オプションページに表示するコンテンツを表示する
jsファイル	ストレージに保管するための処理を実装するなど

具体的なコード

options.html

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <meta name="color-scheme" content="dark light">
  </head>

<body>
  <form>
      <label>hogehoge</label>
      <input type="text" id="hogehoge">
      <button type="submit">Save</button>
  </form>
  <script src="options.js"></script>
</body>

</html>

options.js

async function saveOptions(e) {
  e.preventDefault();
  await browser.storage.sync.set({
    hugahuga: document.querySelector("#hogehoge").value
  });
}
  
async function restoreOptions() {
  let res = await browser.storage.sync.get('hugahuga');
  document.querySelector("#hogehoge").value = res.hugahuga
}
  
document.addEventListener('DOMContentLoaded', restoreOptions);
document.querySelector("form").addEventListener("submit", saveOptions);

上記はフォーム内のボタンが押されたときにブラウザのsyncストレージにデータを保管します。
オプションページが読み込まれたときに、ストレージ内のデータを入れるようにします。

ストレージへのアクセスはbrowser.storage.syncを使います。
storage.sync

manifest.json

{
    "browser_specific_settings": {
        "gecko": {
          "id": "the-town-sample-optionpage@example.com"
        }
    },
    "manifest_version": 2,
    "name": "init-extention",
    "version": "0.1",
  
    "description": "設定ページサンプル",
  
    "icons": {
      "48": "icons/icon-48.png"
    },

    "options_ui": {
      "page": "options.html"
    },
  
    "permissions": [
      "storage"
    ]
}

他の拡張機能と同様にmanifest.jsonを使います。

ストレージを使うためpermissionsにstorageを追加します。
またsyncストレージを使う場合はidの設定が必要なので追加します。