1 <div id="pageData-name" class="pageData">Options</div> 2 <div id="pageData-showTOC" class="pageData">true</div> 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>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>Step 2: Write your options page</h2> 16 17 Here is an example options page: 18 19 <pre> 20 <html> 21 <head><title>My Test Extension Options</title></head> 22 <script type="text/javascript"> 23 24 // Saves options to localStorage. 25 function save_options() { 26 var select = document.getElementById("color"); 27 var color = select.children[select.selectedIndex].value; 28 localStorage["favorite_color"] = color; 29 30 // Update status to let user know options were saved. 31 var status = document.getElementById("status"); 32 status.innerHTML = "Options Saved."; 33 setTimeout(function() { 34 status.innerHTML = ""; 35 }, 750); 36 } 37 38 // Restores select box state to saved value from localStorage. 39 function restore_options() { 40 var favorite = localStorage["favorite_color"]; 41 if (!favorite) { 42 return; 43 } 44 var select = document.getElementById("color"); 45 for (var i = 0; i < select.children.length; i++) { 46 var child = select.children[i]; 47 if (child.value == favorite) { 48 child.selected = "true"; 49 break; 50 } 51 } 52 } 53 54 </script> 55 56 <body onload="restore_options()"> 57 58 Favorite Color: 59 <select id="color"> 60 <option value="red">red</option> 61 <option value="green">green</option> 62 <option value="blue">blue</option> 63 <option value="yellow">yellow</option> 64 </select> 65 66 <br> 67 <button onclick="save_options()">Save</button> 68 </body> 69 </html> 70 </pre> 71 72 <h2>Important notes</h2> 73 <ul> 74 <li>This feature is checked in to the trunk and should land in official builds sometime <b>after</b> version 4.0.222.x.</li> 75 <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> 76 </ul> 77
