chrome/common/extensions/docs/static/options.html

<div id="pageData-name class="pageData">Options</div>
<div id="pageData-showTOC" class="pageData">true</div>
<p>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.

<h2>Step 1: Declare your options page in the manifest</h2>

<pre>{
  "name": "Test Extension",
  "version": "1.0",
  "description": "This is a test",
  <b>"options_page": "options.html"</b>
}
</pre>


<h2>Step 2: Write your options page</h2>

Here is an example options page:

<pre>
&lt;html>
&lt;head>&lt;title>My Test Extension Options&lt;/title>&lt;/head>
&lt;script type="text/javascript">

// 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 &lt; select.children.length; i++) {
    var child = select.children[i];
    if (child.value == favorite) {
      child.selected = "true";
      break;
    }
  }
}

&lt;/script>

&lt;body onload="restore_options()">

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

&lt;br>
&lt;button onclick="save_options()">Save&lt;/button>
&lt;/body>
&lt;/html>
</pre>

<h2>Important notes</h2>
<ul>
<li>This feature is checked in to the trunk and should land in official builds sometime <b>after</b> version 4.0.222.x.</li>
<li>We plan on providing some default css styles to encourage a consistent look across different extensions' options pages. You can star <a href="http://crbug.com/25317">crbug.com/25317</a> to be notified of updates.</li>
</ul>