Extensions Docs Server: Doc conversion script

chrome/common/extensions/docs/server2/templates/articles/options.html

+<h1>Options</h1>
+
+<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": "My extension",
+  ...
+  <b>"options_page": "options.html"</b>,
+  ...
+}</pre>
+
+
+<h2>Step 2: Write your options page</h2>
+
+Here is an example options page:
+
+<pre>// 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 &lt; 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);
+</pre>
+
+<pre>
+&lt;html>
+&lt;head>&lt;title>My Test Extension Options&lt;/title>&lt;/head>
+&lt;script src="options.js">
+
+&lt;body>
+
+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;div id="status">&lt;/div>
+&lt;button id="save">Save&lt;/button>
+&lt;/body>
+&lt;/html>
+</pre>
+
+<h2>Important notes</h2>
+<ul>
+<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>