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