选项页面

选项页面使您可以为扩展定义用户可以更改的偏好设置。用户可以从浏览器的附加组件管理器访问扩展的选项页面

用户访问页面的方式以及页面集成到浏览器用户界面中的方式因浏览器而异。

您可以通过调用 runtime.openOptionsPage() 以编程方式打开页面。

选项页面具有内容安全策略，该策略限制了它们可以加载资源的来源，并禁止一些不安全的做法，例如使用 eval()。有关更多详细信息，请参阅内容安全策略。

指定选项页面

要创建选项页面，请编写一个定义页面的 HTML 文件。该页面可以包含 CSS 和 JavaScript 文件，就像一个正常的网页一样。此页面来自 favourite-colour 示例，包含一个 JavaScript 文件

html

<!doctype html>

<html lang="en">
  <head>
    <meta charset="utf-8" />
  </head>

  <body>
    <form>
      <label for="color">Favorite color</label>
      <input type="text" id="color" name="color" />
      <button type="submit">Save</button>
    </form>
    <script src="options.js"></script>
  </body>
</html>

在页面中运行的 JavaScript 可以使用扩展具有权限的所有 WebExtension API。特别是，您可以使用 storage API 来持久化偏好设置。

将页面的文件打包到您的扩展中。

您还需要在您的 manifest.json 文件中包含 options_ui 键，并向其提供指向页面的 URL。

json

"options_ui": {
  "page": "options.html"
},

有关如何在选项页面和后台或内容脚本之间**共享选项**的详细信息，请参阅 options_ui 页面。

选项内容设计

有关如何设计选项内容以匹配 Firefox 样式的详细信息，请参阅 Acorn 设计系统。

示例

GitHub 上的 webextensions-examples 存储库包含 favourite-colour 示例，它实现了选项页面功能。