Options page 编辑
An Options page enables you to define preferences for your extension that your users can change. Users can access the options page for an extension from the browser's add-ons manager:
The way users access the page, and the way it's integrated into the browser's user interface, will vary from one browser to another.
You can open the page programmatically by calling runtime.openOptionsPage().
Options pages have a Content Security Policy that restricts the sources from which they can load resources, and disallows some unsafe practices such as the use of eval(). See Content Security Policy for more details.
Specifying the options page
To create an options page, write an HTML file defining the page. This page can include CSS and JavaScript files, like a normal web page. This page, from the favourite-colour example, includes a JavaScript file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<form>
<label>Favourite colour</label>
<input type="text" id="colour"/>
<button type="submit">Save</button>
</form>
<script src="options.js"></script>
</body>
</html>JavaScript running in the page can use all the WebExtension APIs that the add-on has permissions for. In particular, you can use the storage API to persist preferences.
Package the page's files in your extension.
You also need to include the options_ui key in your manifest.json file, giving it the URL to the page.
"options_ui": {
"page": "options.html",
"browser_style": true
},Note: Google Chrome and Opera use chrome_style instead of browser_style, so if you wish to support them, you need to add both keys.
See the options_ui page for sharing options between your options page and background or content scripts.
Options content design
For details on how to design your options content to match the style of Firefox, see the Photon Design System and browser styles documentation.
Examples
The webextensions-examples repository on GitHub includes the favourite-colour example which implements options page features.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论