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.</p>
      4 
      5 <p>Use the $(ref:storage) API to persist these preferences. These values will then become accessible in any script within your extension.</p>
      6 
      7 <h2 id="step_1">Step 1: Declare your options page in the manifest</h2>
      8 
      9 <pre data-filename="manifest.json">
     10 {
     11   "name": "My extension",
     12   ...
     13   <b>"options_page": "options.html"</b>,
     14   ...
     15 }
     16 </pre>
     17 
     18 <h2 id="step_2">Step 2: Write your options page</h2>
     19 
     20 Here is an example options page:
     21 
     22 <pre data-filename="options.html">
     23 &lt;!DOCTYPE html>
     24 &lt;html>
     25 &lt;head>&lt;title>My Test Extension Options&lt;/title>&lt;/head>
     26 &lt;body>
     27 
     28 Favorite color:
     29 &lt;select id="color">
     30  &lt;option value="red">red&lt;/option>
     31  &lt;option value="green">green&lt;/option>
     32  &lt;option value="blue">blue&lt;/option>
     33  &lt;option value="yellow">yellow&lt;/option>
     34 &lt;/select>
     35 
     36 &lt;label>
     37   &lt;input type="checkbox" id="like">
     38   I like colors.
     39 &lt;/label>
     40 
     41 &lt;div id="status">&lt;/div>
     42 &lt;button id="save">Save&lt;/button>
     43 
     44 &lt;script src="options.js">&lt;/script>
     45 &lt;/body>
     46 &lt;/html>
     47 </pre>
     48 
     49 <pre data-filename="options.js">
     50 // Saves options to chrome.storage
     51 function save_options() {
     52   var color = document.getElementById('color').value;
     53   var likesColor = document.getElementById('like').checked;
     54   chrome.storage.sync.set({
     55     favoriteColor: color,
     56     likesColor: likesColor
     57   }, function() {
     58     // Update status to let user know options were saved.
     59     var status = document.getElementById('status');
     60     status.textContent = 'Options saved.';
     61     setTimeout(function() {
     62       status.textContent = '';
     63     }, 750);
     64   });
     65 }
     66 
     67 // Restores select box and checkbox state using the preferences
     68 // stored in chrome.storage.
     69 function restore_options() {
     70   // Use default value color = 'red' and likesColor = true.
     71   chrome.storage.sync.get({
     72     favoriteColor: 'red',
     73     likesColor: true
     74   }, function(items) {
     75     document.getElementById('color').value = items.favoriteColor;
     76     document.getElementById('like').checked = items.likesColor;
     77   });
     78 }
     79 document.addEventListener('DOMContentLoaded', restore_options);
     80 document.getElementById('save').addEventListener('click',
     81     save_options);
     82 </pre>
     83 
     84 <h2 id="important_notes">Important notes</h2>
     85 <ul>
     86 <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>
     87 </ul>
     88