| 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.</p> | 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.</p> |
| 4 | 4 |
| 5 <p>Use the $(ref:storage) API to persist these preferences. These values will th
en become accessible in any script within your extension.</p> | 5 <p>Use the $(ref:storage) API to persist these preferences. These values will th
en become accessible in any script within your extension.</p> |
| 6 | 6 |
| 7 <h2 id="step_1">Step 1: Declare your options page in the manifest</h2> | 7 <h2 id="step_1">Step 1: Declare your options page in the manifest</h2> |
| 8 | 8 |
| 9 <pre data-filename="manifest.json"> | 9 <pre data-filename="manifest.json"> |
| 10 { | 10 { |
| 11 "name": "My extension", | 11 "name": "My extension", |
| 12 ... | 12 ... |
| 13 <b>"options_page": "options.html"</b>, | 13 <b>"options_page": "options"</b>, |
| 14 ... | 14 ... |
| 15 } | 15 } |
| 16 </pre> | 16 </pre> |
| 17 | 17 |
| 18 <h2 id="step_2">Step 2: Write your options page</h2> | 18 <h2 id="step_2">Step 2: Write your options page</h2> |
| 19 | 19 |
| 20 Here is an example options page: | 20 Here is an example options page: |
| 21 | 21 |
| 22 <pre data-filename="options.html"> | 22 <pre data-filename="options"> |
| 23 <!DOCTYPE html> | 23 <!DOCTYPE html> |
| 24 <html> | 24 <html> |
| 25 <head><title>My Test Extension Options</title></head> | 25 <head><title>My Test Extension Options</title></head> |
| 26 <body> | 26 <body> |
| 27 | 27 |
| 28 Favorite color: | 28 Favorite color: |
| 29 <select id="color"> | 29 <select id="color"> |
| 30 <option value="red">red</option> | 30 <option value="red">red</option> |
| 31 <option value="green">green</option> | 31 <option value="green">green</option> |
| 32 <option value="blue">blue</option> | 32 <option value="blue">blue</option> |
| (...skipping 45 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 78 } | 78 } |
| 79 document.addEventListener('DOMContentLoaded', restore_options); | 79 document.addEventListener('DOMContentLoaded', restore_options); |
| 80 document.getElementById('save').addEventListener('click', | 80 document.getElementById('save').addEventListener('click', |
| 81 save_options); | 81 save_options); |
| 82 </pre> | 82 </pre> |
| 83 | 83 |
| 84 <h2 id="important_notes">Important notes</h2> | 84 <h2 id="important_notes">Important notes</h2> |
| 85 <ul> | 85 <ul> |
| 86 <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> | 86 <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> |
| 87 </ul> | 87 </ul> |
| OLD | NEW |