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
20Here 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
28Favorite 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
51function 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.
69function 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}
79document.addEventListener('DOMContentLoaded', restore_options);
80document.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