OLD | NEW |
(Empty) | |
| 1 <div id="pageData-title" class="pageData">Options</div> |
| 2 <div id="pageData-showTOC" class="pageData">true</div> |
| 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 on this link will open a n
ew tab pointing at your options page. |
| 4 |
| 5 <h2>Step 1: Declare your options page in the manifest</h2> |
| 6 |
| 7 <pre>{ |
| 8 "name": "Test Extension", |
| 9 "version": "1.0", |
| 10 "description": "This is a test", |
| 11 <b>"options_page": "options.html"</b> |
| 12 } |
| 13 </pre> |
| 14 |
| 15 |
| 16 <h2>Step 2: Write your options page</h2> |
| 17 |
| 18 Here is an example options page: |
| 19 |
| 20 <pre> |
| 21 <html> |
| 22 <head><title>My Test Extension Options</title></head> |
| 23 <script type="text/javascript"> |
| 24 |
| 25 // Saves options to localStorage. |
| 26 function save_options() { |
| 27 var select = document.getElementById("color"); |
| 28 var color = select.children[select.selectedIndex].value; |
| 29 localStorage["favorite_color"] = color; |
| 30 |
| 31 // Update status to let user know options were saved. |
| 32 var status = document.getElementById("status"); |
| 33 status.innerHTML = "Options Saved."; |
| 34 setTimeout(function() { |
| 35 status.innerHTML = ""; |
| 36 }, 750); |
| 37 } |
| 38 |
| 39 // Restores select box state to saved value from localStorage. |
| 40 function restore_options() { |
| 41 var favorite = localStorage["favorite_color"]; |
| 42 if (!favorite) { |
| 43 return; |
| 44 } |
| 45 var select = document.getElementById("color"); |
| 46 for (var i = 0; i < select.children.length; i++) { |
| 47 var child = select.children[i]; |
| 48 if (child.value == favorite) { |
| 49 child.selected = "true"; |
| 50 break; |
| 51 } |
| 52 } |
| 53 } |
| 54 |
| 55 </script> |
| 56 |
| 57 <body onload="restore_options()"> |
| 58 |
| 59 Favorite Color: |
| 60 <select id="color"> |
| 61 <option value="red">red</option> |
| 62 <option value="green">green</option> |
| 63 <option value="blue">blue</option> |
| 64 <option value="yellow">yellow</option> |
| 65 </select> |
| 66 |
| 67 <br> |
| 68 <button onclick="save_options()">Save</button> |
| 69 </body> |
| 70 </html> |
| 71 </pre> |
| 72 |
| 73 <h2>Important Notes</h2> |
| 74 <ul> |
| 75 <li>This feature is checked in to the trunk and should land in official builds s
ometime <b>after</b> version 4.0.222.x.</li> |
| 76 <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> |
| 77 </ul> |
OLD | NEW |