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 |