选项页面
选项页面可让您为扩展定义用户可以更改的首选项。用户可以从浏览器的附加组件管理器访问扩展的选项页面。
用户访问页面的方式以及它如何集成到浏览器的用户界面中,因浏览器而异。
您可以通过调用 runtime.openOptionsPage() 以编程方式打开该页面。
选项页面具有内容安全策略,该策略限制了它们可以加载资源的来源,并禁止了一些不安全的做法,例如使用 eval()。有关更多详细信息,请参阅 内容安全策略。
指定选项页面
要创建选项页面,请编写一个定义该页面的 HTML 文件。此页面可以包含 CSS 和 JavaScript 文件,就像普通网页一样。此页面(来自 favourite-colour 示例)包含一个 JavaScript 文件。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="color-scheme" content="dark light" />
</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>
请注意使用了 <meta name="color-scheme" content="dark light">。这使得嵌入式 UI 可以根据用户的浏览器偏好设置在浅色和深色主题之间自动切换。有关更多信息,请参阅 <meta name="color-scheme">。
页面中运行的 JavaScript 可以使用扩展具有 权限 的所有 WebExtension API。特别是,您可以使用 storage API 来持久化首选项。
将页面的文件打包到您的扩展中。
您还需要在 manifest.json 文件中包含 options_ui 键,并为其提供页面的 URL。
"options_ui": {
"page": "options.html"
},
有关在选项页面和后台脚本或内容脚本之间 **共享选项** 的详细信息,请参阅 options_ui 页面。
选项内容设计
有关如何设计选项内容以匹配 Firefox 风格的详细信息,请参阅 Acorn 设计系统。
示例
GitHub 上的 webextensions-examples 存储库包含实现了选项页面功能的 favourite-colour 示例。