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 |