Now let's create a settings page to allow the user to set the color of the border.
First, update manifest.json
so it has these contents:
{
"manifest_version": 2,
"name": "Settings example",
"version": "1.0",
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["borderify.js"]
}
],
"options_ui": {
"page": "options.html"
},
"permissions": ["storage"],
"browser_specific_settings": {
"gecko": {
"id": "[email protected]"
}
}
}
We've added three new manifest keys:
-
options_ui
-
This sets an HTML document to be the settings page (also called options page) for this extension.
-
permissions
-
We'll use the storage
API to store the settings, and we need to ask permission to use this API.
-
browser_specific_settings
-
You have to include an extension id in order to save and retrieve settings from synchronized storage.
Next, because we've promised to provide options.html
, let's create it. Create a file with that name inside the settings
directory, and give it the following contents:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form>
<label>Border color<input type="text" id="color" ></label>
<button type="submit">Save</button>
</form>
<script src="options.js"></script>
</body>
</html>
This defines a <form>
with a labeled text <input>
and a submit <button>
. It also includes a script called options.js
.
Create options.js
, again in the settings
directory, and give it the following contents:
function saveOptions(e) {
e.preventDefault();
browser.storage.sync.set({
color: document.querySelector("#color").value
});
}
function restoreOptions() {
function setCurrentChoice(result) {
document.querySelector("#color").value = result.color || "blue";
}
function onError(error) {
console.log(`Error: ${error}`);
}
let getting = browser.storage.sync.get("color");
getting.then(setCurrentChoice, onError);
}
document.addEventListener("DOMContentLoaded", restoreOptions);
document.querySelector("form").addEventListener("submit", saveOptions);
This does two things:
- When the document has loaded, it fetches the value of
"color"
from storage using storage.sync.get()
. If the value isn't set, it uses the default "blue"
. This retrieves the values from the sync
storage area.
- When the user submits the form by clicking Save, it stores the value of the textbox using
storage.sync.set()
. This saves the value to the sync
storage area.
Note: Specifying a separate .js
file is required. You cannot use inline JavaScript.
You could store the settings values in local storage instead if you feel that local storage is preferable for your extension.
Note: The implementation of storage.sync
in Firefox relies on the Add-on ID. If you use storage.sync
, you must set an ID for your extension using the browser_specific_settings
key in manifest.json
, as shown in the example manifest above. See bug 1323228 for related information.
Finally, update borderify.js
to read the border color from storage:
function onError(error) {
console.log(`Error: ${error}`);
}
function onGot(item) {
let color = "blue";
if (item.color) {
color = item.color;
}
document.body.style.border = "10px solid " + color;
}
let getting = browser.storage.sync.get("color");
getting.then(onGot, onError);
At this point, the complete extension should look like this:
settings/
borderify.js
manifest.json
options.html
options.js
Now:
- reload the extension
- load a web page
- visit "
about:addons
" to open the settings and click the Preferences button next to the extension's entry and change the border color.
- reload the web page to see the difference.