Home | History | Annotate | Download | only in articles 
      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>
     83