↑ arvau

MDN / options_ui

Use the options_ui key to define an options page for your extension. You use this page to enable users to modify your extension’s settings.

The way the user opens the page is browser-dependent and also depends on the open_in_tab setting. Your extension can also open the page using .

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 , or a reference to the [`

Use the options_ui key to define an options page for your extension/ You use this page to enable users to modify your extension’s settings/

The way the user opens the page is browser-dependent and also depends on the open_in_tab setting/ Your extension can also open the page using {{WebExtAPIRef(“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 {{WebExtAPIRef(“runtime/getBackgroundPage()”)}}, or a reference to the {{domxref(“Window”)}} of any of the pages running within your extension with {{WebExtAPIRef(“extension/getViews()”)}}/ Alternately, you can communicate between the JavaScript for your options page and your background script(s) using {{WebExtAPIRef(“runtime/sendMessage()”)}}, {{WebExtAPIRef(“runtime/onMessage”)}}, or {{WebExtAPIRef(“runtime/connect()”)}}/ The latter (or {{WebExtAPIRef(“runtime/Port”)}} equivalents) can also be used to share options between your background script(s) and your content script(s)/

In general, you want to store options changed on option pages using the {{WebExtAPIRef(“storage”, “storage API”, “”, “true”)}} to either {{WebExtAPIRef(“storage/sync”)}} (if you want the settings synchronized across all instances of that browser that the user is logged into), or {{WebExtAPIRef(“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 {{WebExtAPIRef(“storage/onChanged”)}}/

Syntax

The options_ui key is an object with the following contents:

Example

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

Browser compatibility

{{Compat}}

See also

Use the options_ui key to define an options page for your extension/ You use this page to enable users to modify your extension’s settings/

The way the user opens the page is browser-dependent and also depends on the open_in_tab setting/ Your extension can also open the page using {{WebExtAPIRef(“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 {{WebExtAPIRef(“runtime/getBackgroundPage()”)}}, or a reference to the {{domxref(“Window”)}} of any of the pages running within your extension with {{WebExtAPIRef(“extension/getViews()”)}}/ Alternately, you can communicate between the JavaScript for your options page and your background script(s) using {{WebExtAPIRef(“runtime/sendMessage()”)}}, {{WebExtAPIRef(“runtime/onMessage”)}}, or {{WebExtAPIRef(“runtime/connect()”)}}/ The latter (or {{WebExtAPIRef(“runtime/Port”)}} equivalents) can also be used to share options between your background script(s) and your content script(s)/

In general, you want to store options changed on option pages using the {{WebExtAPIRef(“storage”, “storage API”, “”, “true”)}} to either {{WebExtAPIRef(“storage/sync”)}} (if you want the settings synchronized across all instances of that browser that the user is logged into), or {{WebExtAPIRef(“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 {{WebExtAPIRef(“storage/onChanged”)}}/

Syntax

The options_ui key is an object with the following contents:

Example

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

Browser compatibility

{{Compat}}

See also

In general, you want to store options changed on option pages using the to either (if you want the settings synchronized across all instances of that browser that the user is logged into), or (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 .

Syntax

The options_ui key is an object with the following contents:

Example

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

Browser compatibility

See also