| OLD | NEW |
| 1 <h1>Options</h1> | 1 <h1>Options</h1> |
| 2 | 2 |
| 3 <p>To allow users to customize the behavior of your extension, you may wish to p
rovide an options page. If you do, a link to it will be provided from the extens
ions management page at chrome://extensions. Clicking the Options link opens a n
ew tab pointing at your options page. | 3 <p>To allow users to customize the behavior of your extension, you may wish to p
rovide an options page. If you do, a link to it will be provided from the extens
ions management page at chrome://extensions. Clicking the Options link opens a n
ew tab pointing at your options page. |
| 4 | 4 |
| 5 <h2 id="step_1">Step 1: Declare your options page in the manifest</h2> | 5 <h2 id="step_1">Step 1: Declare your options page in the manifest</h2> |
| 6 | 6 |
| 7 <pre>{ | 7 <pre>{ |
| 8 "name": "My extension", | 8 "name": "My extension", |
| 9 ... | 9 ... |
| 10 <b>"options_page": "options.html"</b>, | 10 <b>"options_page": "options.html"</b>, |
| (...skipping 36 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 47 } | 47 } |
| 48 } | 48 } |
| 49 } | 49 } |
| 50 document.addEventListener('DOMContentReady', restore_options); | 50 document.addEventListener('DOMContentReady', restore_options); |
| 51 document.querySelector('#save').addEventListener('click', save_options); | 51 document.querySelector('#save').addEventListener('click', save_options); |
| 52 </pre> | 52 </pre> |
| 53 | 53 |
| 54 <pre> | 54 <pre> |
| 55 <html> | 55 <html> |
| 56 <head><title>My Test Extension Options</title></head> | 56 <head><title>My Test Extension Options</title></head> |
| 57 <script src="options.js"> | 57 <script src="options.js"></script> |
| 58 | 58 |
| 59 <body> | 59 <body> |
| 60 | 60 |
| 61 Favorite Color: | 61 Favorite Color: |
| 62 <select id="color"> | 62 <select id="color"> |
| 63 <option value="red">red</option> | 63 <option value="red">red</option> |
| 64 <option value="green">green</option> | 64 <option value="green">green</option> |
| 65 <option value="blue">blue</option> | 65 <option value="blue">blue</option> |
| 66 <option value="yellow">yellow</option> | 66 <option value="yellow">yellow</option> |
| 67 </select> | 67 </select> |
| 68 | 68 |
| 69 <br> | 69 <br> |
| 70 <div id="status"></div> | 70 <div id="status"></div> |
| 71 <button id="save">Save</button> | 71 <button id="save">Save</button> |
| 72 </body> | 72 </body> |
| 73 </html> | 73 </html> |
| 74 </pre> | 74 </pre> |
| 75 | 75 |
| 76 <h2 id="important_notes">Important notes</h2> | 76 <h2 id="important_notes">Important notes</h2> |
| 77 <ul> | 77 <ul> |
| 78 <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.c
om/25317">crbug.com/25317</a> to be notified of updates.</li> | 78 <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.c
om/25317">crbug.com/25317</a> to be notified of updates.</li> |
| 79 </ul> | 79 </ul> |
| OLD | NEW |