实现设置页面
设置页面提供了一种让用户查看和更改扩展的设置（有时也称为“偏好设置”或“选项”）的方式。
使用 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 从您的扩展程序直接打开设置页面 - 设置页面示例