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 callingruntime.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 ofeval(). SeeContent 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 thefavourite-colour example, includes a JavaScript file:
<!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" name="color" /> <button type="submit">Save</button> </form> <script src="options.js"></script> </body></html>Note the use of<meta name="color-scheme" content="dark light">. This enables automatic switching between light and dark themes in the embedded UI based on the user's browser preferences. For more information, see<meta name="color-scheme">.
JavaScript running in the page can use all theWebExtension APIs that the add-on haspermissions for. In particular, you can use thestorage API to persist preferences.
Package the page's files in your extension.
You also need to include theoptions_ui key in your manifest.json file, giving it the URL to the page.
"options_ui": { "page": "options.html"},See theoptions_ui page forsharing 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 theAcorn Design System.
Examples
Thewebextensions-examples repository on GitHub includes thefavourite-colour example which implements options page features.