概要
これは初心者のブラウザ拡張機能 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の設定が必要なので追加します。