| <h1>Options</h1> |
| |
| <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. |
| |
| <h2 id="step_1">Step 1: Declare your options page in the manifest</h2> |
| |
| <pre>{ |
| "name": "My extension", |
| ... |
| <b>"options_page": "options.html"</b>, |
| ... |
| }</pre> |
| |
| |
| <h2 id="step_2">Step 2: Write your options page</h2> |
| |
| Here is an example options page: |
| |
| <pre>// Save this script as `options.js` |
| |
| // Saves options to localStorage. |
| function save_options() { |
| var select = document.getElementById("color"); |
| var color = select.children[select.selectedIndex].value; |
| localStorage["favorite_color"] = color; |
| |
| // Update status to let user know options were saved. |
| var status = document.getElementById("status"); |
| status.innerHTML = "Options Saved."; |
| setTimeout(function() { |
| status.innerHTML = ""; |
| }, 750); |
| } |
| |
| // Restores select box state to saved value from localStorage. |
| function restore_options() { |
| var favorite = localStorage["favorite_color"]; |
| if (!favorite) { |
| return; |
| } |
| var select = document.getElementById("color"); |
| for (var i = 0; i < select.children.length; i++) { |
| var child = select.children[i]; |
| if (child.value == favorite) { |
| child.selected = "true"; |
| break; |
| } |
| } |
| } |
| document.addEventListener('DOMContentLoaded', restore_options); |
| document.querySelector('#save').addEventListener('click', save_options); |
| </pre> |
| |
| <pre> |
| <html> |
| <head><title>My Test Extension Options</title></head> |
| |
| <body> |
| |
| Favorite Color: |
| <select id="color"> |
| <option value="red">red</option> |
| <option value="green">green</option> |
| <option value="blue">blue</option> |
| <option value="yellow">yellow</option> |
| </select> |
| |
| <br> |
| <div id="status"></div> |
| <button id="save">Save</button> |
| </body> |
| |
| <script src="options.js"></script> |
| |
| </html> |
| </pre> |
| |
| <h2 id="important_notes">Important notes</h2> |
| <ul> |
| <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> |
| </ul> |