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 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>
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 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"
},
See the options_ui page for sharing options between your options page and background or content scripts.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4