1: <html>
2: <head><title>My Test Extension Options</title></head>
3: <script type="text/javascript">
4:
5: // Saves options to localStorage.
6: function save_options() {
7: var select = document.getElementById("color");
8: var color = select.children[select.selectedIndex].value;
9: localStorage["favorite_color"] = color;
10:
11: // Update status to let user know options were saved.
12: var status = document.getElementById("status");
13: status.innerHTML = "Options Saved.";
14: setTimeout(function() {
15: status.innerHTML = "";
16: }, 750);
17: }
18:
19: // Restores select box state to saved value from localStorage.
20: function restore_options() {
21: var favorite = localStorage["favorite_color"];
22: if (!favorite) {
23: return;
24: }
25: var select = document.getElementById("color");
26: for (var i = 0; i < select.children.length; i++) {
27: var child = select.children[i];
28: if (child.value == favorite) {
29: child.selected = "true";
30: break;
31: }
32: }
33: }
34:
35: </script>
36:
37: <body onload="restore_options()">
38:
39: Favorite Color:
40: <select id="color">
41: <option value="red">red</option>
42: <option value="green">green</option>
43: <option value="blue">blue</option>
44: <option value="yellow">yellow</option>
45: </select>
46:
47: <br>
48: <button onclick="save_options()">Save</button>
49: </body>
50: </html>