options_ui 编辑

TypeObject
MandatoryNo
Example
"options_ui": {
  "page": "options/options.html"
}

Use the options_ui key to define an options page for your extension.

The options page contains settings for the extension. The user can access it from the browser's add-ons manager, and you can open it from within your extension using runtime.openOptionsPage().

You specify options_ui as a path to an HTML file packaged with your extension. The HTML file can include CSS and JavaScript files, just like a normal web page. Unlike a normal page, though, the JavaScript can use all the WebExtension APIs that the extension has permissions for. However, it runs in a different scope than your background scripts.

If you want to share data or functions between the JavaScript on your options page and your background script(s), you can do so directly by obtaining a reference to the Window of your background scripts by using extension.getBackgroundPage(), or a reference to the Window of any of the pages running within your extension with extension.getViews(). Alternately, you can communicate between the JavaScript for your options page and your background script(s) using runtime.sendMessage(), runtime.onMessage, or runtime.connect().
The latter (or runtime.Port equivalents) can also be used to share options between your background script(s) and your content script(s).

In general, you will want to store options changed on option pages using the storage API to either storage.sync() (if you want the settings synchronized across all instances of that browser that the user is logged into), or storage.local() (if the settings are local to the current machine/profile). If you do so and your background script(s) (or content script(s)) need to know about the change, your script(s) might choose to add a listener to storage.onChanged.

Syntax

The options_ui key is an object with the following contents:

NameTypeDescription
browser_style
Optional
Boolean

Defaults to true.

Use this to include a stylesheet in your page that will make it look consistent with the browser's UI and with other extensions that use the browser_style property. Although it defaults to true, it's recommended that you include this property.

In Firefox, the stylesheet can be seen at chrome://browser/content/extension.css, or chrome://browser/content/extension-mac.css on macOS. When setting dimensions, be aware that this style sheet currently sets box-sizing: border-box (see box-sizing).

The Firefox Style Guide describes the classes you can apply to elements in the popup in order to get particular styles.

open_in_tab
Optional
Boolean

Defaults to false.

If true, the options page will open in a normal browser tab, rather than being integrated into the browser's add-ons manager.

pageString

Mandatory.

The path to an HTML file containing the specification of your options page.

The path is relative to the location of manifest.json itself.

Example

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

Browser compatibility

BCD tables only load in the browser

See also

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据

词条统计

浏览:68 次

字数:7782

最后编辑:8年前

编辑次数:0 次

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文