Implement a settings page

First, we'll write an extension that adds a blue border to every page the user visits.

Create a new directory called settings, then create a file called manifest.json inside it with the following contents:

{
  "manifest_version": 2,
  "name": "Settings example",
  "version": "1.0",

  "content_scripts": [
    {
      "matches": [""],
      "js": ["borderify.js"]
    }
  ]
}

This extension instructs the browser to load a content script called "borderify.js" into all web pages the user visits.

Next, create a file called borderify.js inside the settings directory, and give it these contents:

document.body.style.border = "10px solid blue";

This just adds a blue border to the page.

Now install and test the extension.

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": [""],
      "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:

  
    
  

  
    

      Border color 
      Save
    

    
  

This defines a

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);

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}`;
}

const getting = browser.storage.sync.get("color");
getting.then(onGot, onError);

settings/
    borderify.js
    manifest.json
    options.html
    options.js

• options_ui key of manifest.json reference documentation

• storage API reference documentation

• open the settings page directly from your extension using the runtime.openOptionsPage() API

• Settings page example:

  • favourite-colour