实现设置页面

设置页面为用户提供了一种查看和更改扩展设置（有时也称为“首选项”或“选项”）的方法。

使用 WebExtension API，设置通常使用 storage API 进行存储。实现设置页面是一个三步过程

编写一个 HTML 文件，该文件显示设置并允许用户更改它们。
编写一个脚本，从 HTML 文件中包含该脚本，该脚本从存储中填充设置页面，并在用户更改设置时更新存储的设置。
将 HTML 文件的路径设置为 manifest.json 中的 options_ui 键。通过这样做，HTML 文档将在浏览器的附加组件管理器中显示，与扩展的名称和描述一起显示。

注意：您还可以使用 runtime.openOptionsPage() 函数以编程方式打开此页面。

一个简单的扩展

首先，我们将编写一个扩展，该扩展会为用户访问的每个页面添加蓝色边框。

创建一个名为 settings 的新目录，然后在其中创建一个名为 manifest.json 的文件，其内容如下所示

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 以使其具有以下内容

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": "[email protected]"
    }
  }
}

我们添加了三个新的清单键

options_ui: 这将 HTML 文档设置为此扩展的设置页面（也称为选项页面）。
权限: 我们将使用 storage API 存储设置，并且我们需要请求使用此 API 的权限。
browser_specific_settings: 您必须包含扩展 ID 才能从同步存储中保存和检索设置。

接下来，因为我们承诺提供 options.html，所以让我们创建它。在 settings 目录中创建一个具有该名称的文件，并赋予其以下内容

html

<!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>

这定义了一个带有标记文本 <input> 和提交 <button> 的 <form>。它还包含一个名为 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，如上述清单示例所示。有关相关信息，请参阅 Firefox 错误 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”以打开设置，然后单击扩展条目旁边的“首选项”按钮并更改边框颜色。
重新加载网页以查看差异。

了解更多

options_ui 键的 manifest.json 参考文档
storage API 参考文档
使用 runtime.openOptionsPage() API 直接从扩展程序打开设置页面
设置页面示例
- 喜欢的颜色