| 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>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>, |
| 11 ... | 11 ... |
| 12 }</pre> | 12 }</pre> |
| 13 | 13 |
| 14 | 14 |
| 15 <h2>Step 2: Write your options page</h2> | 15 <h2 id="step_2">Step 2: Write your options page</h2> |
| 16 | 16 |
| 17 Here is an example options page: | 17 Here is an example options page: |
| 18 | 18 |
| 19 <pre>// Save this script as `options.js` | 19 <pre>// Save this script as `options.js` |
| 20 | 20 |
| 21 // Saves options to localStorage. | 21 // Saves options to localStorage. |
| 22 function save_options() { | 22 function save_options() { |
| 23 var select = document.getElementById("color"); | 23 var select = document.getElementById("color"); |
| 24 var color = select.children[select.selectedIndex].value; | 24 var color = select.children[select.selectedIndex].value; |
| 25 localStorage["favorite_color"] = color; | 25 localStorage["favorite_color"] = color; |
| (...skipping 40 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 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>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 |