實現設定頁面
設定頁面提供了一種讓使用者檢視和更改擴充套件的設定（有時也稱為“偏好設定”或“選項”）的方式。
使用 WebExtension API，設定通常使用 storage API 來儲存。實現設定頁面是一個三步過程：
- 編寫一個 HTML 檔案，用於顯示設定並允許使用者更改它們。
- 編寫一個指令碼，並從 HTML 檔案中包含它，該指令碼從儲存中填充設定頁面，並在使用者更改設定時更新已儲存的設定。
- 在
manifest.json中將 HTML 檔案的路徑設定為options_ui鍵。透過這樣做，HTML 文件將在瀏覽器載入項管理器中顯示，旁邊是擴充套件的名稱和描述。
注意：您也可以使用 runtime.openOptionsPage() 函式以程式設計方式開啟此頁面。
一個簡單的擴充套件
首先，我們將編寫一個擴充套件，該擴充套件為使用者訪問的每個頁面新增藍色邊框。
建立一個名為 settings 的目錄，然後在其中建立一個名為 manifest.json 的檔案，內容如下：
{
"manifest_version": 2,
"name": "Settings example",
"version": "1.0",
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["borderify.js"]
}
]
}
此擴充套件指示瀏覽器將一個名為“borderify.js”的內容指令碼載入到使用者訪問的所有網頁中。
接下來，在 settings 目錄中建立一個名為 borderify.js 的檔案，並新增以下內容：
document.body.style.border = "10px solid blue";
這只是為頁面新增一個藍色邊框。
現在 安裝 並測試該擴充套件。
新增設定
現在讓我們建立一個設定頁面，允許使用者設定邊框的顏色。
首先，更新 manifest.json，使其包含以下內容：
{
"manifest_version": 2,
"name": "Settings example",
"version": "1.0",
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["borderify.js"]
}
],
"options_ui": {
"page": "options.html"
},
"permissions": ["storage"],
"browser_specific_settings": {
"gecko": {
"id": "@addon-example"
}
}
}
我們添加了三個新的 manifest 鍵：
options_ui-
這會將一個 HTML 文件設定為此擴充套件的設定頁面（也稱為選項頁面）。
permissions-
我們將使用
storageAPI 來儲存設定，並且我們需要請求使用此 API 的許可權。 browser_specific_settings-
您必須包含擴充套件 ID 才能從同步儲存中儲存和檢索設定。
接下來，因為我們承諾提供 options.html，所以讓我們建立它。在 settings 目錄中建立名為該名稱的檔案，並賦予其以下內容：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
</head>
<body>
<form>
<label>Border color <input type="text" id="color" name="color" /></label>
<button type="submit">Save</button>
</form>
<script src="options.js"></script>
</body>
</html>
這定義了一個 <form>，其中包含一個帶標籤的文字 <input> 和一個提交 <button>。它還包含一個名為 options.js 的指令碼。
建立 options.js，同樣在 settings 目錄中，並賦予其以下內容：
function saveOptions(e) {
e.preventDefault();
browser.storage.sync.set({
color: document.querySelector("#color").value,
});
}
function restoreOptions() {
function setCurrentChoice(result) {
document.querySelector("#color").value = result.color || "blue";
}
function onError(error) {
console.log(`Error: ${error}`);
}
let getting = browser.storage.sync.get("color");
getting.then(setCurrentChoice, onError);
}
document.addEventListener("DOMContentLoaded", restoreOptions);
document.querySelector("form").addEventListener("submit", saveOptions);
這做了兩件事：
- 當文件載入完畢後，它使用
storage.sync.get()從儲存中獲取"color"的值。如果該值未設定，則使用預設值"blue"。這從sync儲存區域檢索值。 - 當用戶透過單擊“儲存”提交表單時，它使用
storage.sync.set()儲存文字框的值。這會將值儲存到sync儲存區域。
注意：必須指定一個單獨的 .js 檔案。您不能使用內聯 JavaScript。
如果您認為本地儲存更適合您的擴充套件，則可以將設定值儲存在本地儲存中。
注意：Firefox 中 storage.sync 的實現依賴於載入項 ID。如果您使用 storage.sync，則必須使用 manifest.json 中的 browser_specific_settings 鍵為您的擴充套件設定 ID，如上面的示例 manifest 所示。有關相關資訊，請參閱 Firefox bug 1323228。
最後，更新 borderify.js 以從儲存中讀取邊框顏色：
function onError(error) {
console.log(`Error: ${error}`);
}
function onGot(item) {
let color = "blue";
if (item.color) {
color = item.color;
}
document.body.style.border = `10px solid ${color}`;
}
const getting = browser.storage.sync.get("color");
getting.then(onGot, onError);
此時，完整的擴充套件應該如下所示：
settings/
borderify.js
manifest.json
options.html
options.js
現在，
- 重新載入擴充套件，
- 載入一個網頁，
- 訪問
about:addons以開啟設定，然後單擊擴充套件條目旁邊的“偏好設定”按鈕並更改邊框顏色。 - 重新載入網頁以檢視差異。
瞭解更多
manifest.json的options_ui鍵參考文件storageAPI 參考文件- 使用
runtime.openOptionsPage()API 從您的擴充套件程式直接開啟設定頁面 - 設定頁面示例