Google Chrome Extensions

Options

To allow users to customize the behavior of your extension, you may wish to provide an options page. If you do, a link to it will be provided from the extensions management page at chrome://extensions. Clicking the Options link opens a new tab pointing at your options page.

Step 1: Declare your options page in the manifest

{
  "name": "My extension",
  ...
  "options_page": "options.html",
  ...
}

Step 2: Write your options page

Here is an example options page: 
// Save this script as `options.js`

// Saves options to localStorage.
function save_options() {
  var select = document.getElementById("color");
  var color = select.children[select.selectedIndex].value;
  localStorage["favorite_color"] = color;

  // Update status to let user know options were saved.
  var status = document.getElementById("status");
  status.innerHTML = "Options Saved.";
  setTimeout(function() {
    status.innerHTML = "";
  }, 750);
}

// Restores select box state to saved value from localStorage.
function restore_options() {
  var favorite = localStorage["favorite_color"];
  if (!favorite) {
    return;
  }
  var select = document.getElementById("color");
  for (var i = 0; i < select.children.length; i++) {
    var child = select.children[i];
    if (child.value == favorite) {
      child.selected = "true";
      break;
    }
  }
}
document.addEventListener('DOMContentReady', restore_options);
document.querySelector('#save').addEventListener('click', save_options);

<html>
<head><title>My Test Extension Options</title></head>
<script src="options.js"></script>

<body>

Favorite Color:
<select id="color">
 <option value="red">red</option>
 <option value="green">green</option>
 <option value="blue">blue</option>
 <option value="yellow">yellow</option>
</select>

<br>
<div id="status"></div>
<button id="save">Save</button>
</body>
</html>

Important notes