| Index: chrome/common/extensions/docs/static/options.html
|
| ===================================================================
|
| --- chrome/common/extensions/docs/static/options.html (revision 0)
|
| +++ chrome/common/extensions/docs/static/options.html (revision 0)
|
| @@ -0,0 +1,77 @@
|
| +<div id="pageData-title" class="pageData">Options</div>
|
| +<div id="pageData-showTOC" class="pageData">true</div>
|
| +<p>To allow users to customize the behavior of your extension, you may wish to provide an options page. If you do, a link to it will be provided from the Extensions Management page at chrome://extensions. Clicking on this link will open a new tab pointing at your options page.
|
| +
|
| +<h2>Step 1: Declare your options page in the manifest</h2>
|
| +
|
| +<pre>{
|
| + "name": "Test Extension",
|
| + "version": "1.0",
|
| + "description": "This is a test",
|
| + <b>"options_page": "options.html"</b>
|
| +}
|
| +</pre>
|
| +
|
| +
|
| +<h2>Step 2: Write your options page</h2>
|
| +
|
| +Here is an example options page:
|
| +
|
| +<pre>
|
| +<html>
|
| +<head><title>My Test Extension Options</title></head>
|
| +<script type="text/javascript">
|
| +
|
| +// Saves options to localStorage.
|
| +function save_options() {
|
| + var select = document.getElementById("color");
|
| + var color = select.children[select.selectedIndex].value;
|
| + localStorage["favorite_color"] = color;
|
| +
|
| + // Update status to let user know options were saved.
|
| + var status = document.getElementById("status");
|
| + status.innerHTML = "Options Saved.";
|
| + setTimeout(function() {
|
| + status.innerHTML = "";
|
| + }, 750);
|
| +}
|
| +
|
| +// Restores select box state to saved value from localStorage.
|
| +function restore_options() {
|
| + var favorite = localStorage["favorite_color"];
|
| + if (!favorite) {
|
| + return;
|
| + }
|
| + var select = document.getElementById("color");
|
| + for (var i = 0; i < select.children.length; i++) {
|
| + var child = select.children[i];
|
| + if (child.value == favorite) {
|
| + child.selected = "true";
|
| + break;
|
| + }
|
| + }
|
| +}
|
| +
|
| +</script>
|
| +
|
| +<body onload="restore_options()">
|
| +
|
| +Favorite Color:
|
| +<select id="color">
|
| + <option value="red">red</option>
|
| + <option value="green">green</option>
|
| + <option value="blue">blue</option>
|
| + <option value="yellow">yellow</option>
|
| +</select>
|
| +
|
| +<br>
|
| +<button onclick="save_options()">Save</button>
|
| +</body>
|
| +</html>
|
| +</pre>
|
| +
|
| +<h2>Important Notes</h2>
|
| +<ul>
|
| +<li>This feature is checked in to the trunk and should land in official builds sometime <b>after</b> version 4.0.222.x.</li>
|
| +<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.com/25317">crbug.com/25317</a> to be notified of updates.</li>
|
| +</ul>
|
|
|
| Property changes on: chrome\common\extensions\docs\static\options.html
|
| ___________________________________________________________________
|
| Added: svn:eol-style
|
| + LF
|
|
|
|
|