OLD | NEW |
1 <h1>Options</h1> | 1 <h1>Options</h1> |
2 | 2 |
| 3 <p class="note"> |
| 4 There is a new way to write your options pages, starting from Chrome 40. |
| 5 <a href="optionsV2">Learn more</a>, and try it out! |
| 6 </p> |
| 7 |
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> | 8 <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 | 9 |
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> | 10 <p>Use the $(ref:storage.sync) API to persist these preferences. These values wi
ll then become accessible in any script within your extension, on all your user'
s devices.</p> |
6 | 11 |
7 <h2 id="step_1">Step 1: Declare your options page in the manifest</h2> | 12 <h2 id="step_1">Step 1: Declare your options page in the manifest</h2> |
8 | 13 |
9 <pre data-filename="manifest.json"> | 14 <pre data-filename="manifest.json"> |
10 { | 15 { |
11 "name": "My extension", | 16 "name": "My extension", |
12 ... | 17 ... |
13 <b>"options_page": "options.html"</b>, | 18 <b>"options_page": "options.html"</b>, |
14 ... | 19 ... |
15 } | 20 } |
(...skipping 57 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
73 likesColor: true | 78 likesColor: true |
74 }, function(items) { | 79 }, function(items) { |
75 document.getElementById('color').value = items.favoriteColor; | 80 document.getElementById('color').value = items.favoriteColor; |
76 document.getElementById('like').checked = items.likesColor; | 81 document.getElementById('like').checked = items.likesColor; |
77 }); | 82 }); |
78 } | 83 } |
79 document.addEventListener('DOMContentLoaded', restore_options); | 84 document.addEventListener('DOMContentLoaded', restore_options); |
80 document.getElementById('save').addEventListener('click', | 85 document.getElementById('save').addEventListener('click', |
81 save_options); | 86 save_options); |
82 </pre> | 87 </pre> |
83 | |
84 <h2 id="important_notes">Important notes</h2> | |
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> | |
87 </ul> | |
OLD | NEW |