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

   1 <h1>Options</h1>
   2
   3 <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.
   4
   5 <h2 id="step_1">Step 1: Declare your options page in the manifest</h2>
   6
   7 <pre data-filename="manifest.json">
   8 {
   9   "name": "My extension",
  10   ...
  11   <b>"options_page": "options.html"</b>,
  12   ...
  13 }
  14 </pre>
  15
  16
  17 <h2 id="step_2">Step 2: Write your options page</h2>
  18
  19 Here is an example options page:
  20
  21 <pre data-filename="options.html">
  22 &lt;html>
  23 &lt;head>&lt;title>My Test Extension Options&lt;/title>&lt;/head>
  24
  25 &lt;body>
  26
  27 Favorite Color:
  28 &lt;select id="color">
  29  &lt;option value="red">red&lt;/option>
  30  &lt;option value="green">green&lt;/option>
  31  &lt;option value="blue">blue&lt;/option>
  32  &lt;option value="yellow">yellow&lt;/option>
  33 &lt;/select>
  34
  35 &lt;br>
  36 &lt;div id="status">&lt;/div>
  37 &lt;button id="save">Save&lt;/button>
  38 &lt;/body>
  39
  40 &lt;script src="options.js">&lt;/script>
  41
  42 &lt;/html>
  43 </pre>
  44
  45 <pre data-filename="options.js">
  46 // Saves options to localStorage.
  47 function save_options() {
  48   var select = document.getElementById("color");
  49   var color = select.children[select.selectedIndex].value;
  50   localStorage["favorite_color"] = color;
  51
  52   // Update status to let user know options were saved.
  53   var status = document.getElementById("status");
  54   status.innerHTML = "Options Saved.";
  55   setTimeout(function() {
  56     status.innerHTML = "";
  57   }, 750);
  58 }
  59
  60 // Restores select box state to saved value from localStorage.
  61 function restore_options() {
  62   var favorite = localStorage["favorite_color"];
  63   if (!favorite) {
  64     return;
  65   }
  66   var select = document.getElementById("color");
  67   for (var i = 0; i &lt; select.children.length; i++) {
  68     var child = select.children[i];
  69     if (child.value == favorite) {
  70       child.selected = "true";
  71       break;
  72     }
  73   }
  74 }
  75 document.addEventListener('DOMContentLoaded', restore_options);
  76 document.querySelector('#save').addEventListener('click', save_options);
  77 </pre>
  78
  79 <h2 id="important_notes">Important notes</h2>
  80 <ul>
  81 <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>
  82 </ul>