Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(603)

Unified Diff: chrome/common/extensions/docs/static/options.html

Issue 314012: Adding documentation for extensions options pages. (Closed) Base URL: svn://chrome-svn/chrome/trunk/src/
Patch Set: '' Created 11 years, 2 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « chrome/common/extensions/docs/static/manifest.html ('k') | chrome/common/extensions/docs/tabs.html » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
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>
+&lt;html>
+&lt;head>&lt;title>My Test Extension Options&lt;/title>&lt;/head>
+&lt;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 &lt; select.children.length; i++) {
+ var child = select.children[i];
+ if (child.value == favorite) {
+ child.selected = "true";
+ break;
+ }
+ }
+}
+
+&lt;/script>
+
+&lt;body onload="restore_options()">
+
+Favorite Color:
+&lt;select id="color">
+ &lt;option value="red">red&lt;/option>
+ &lt;option value="green">green&lt;/option>
+ &lt;option value="blue">blue&lt;/option>
+ &lt;option value="yellow">yellow&lt;/option>
+&lt;/select>
+
+&lt;br>
+&lt;button onclick="save_options()">Save&lt;/button>
+&lt;/body>
+&lt;/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
« no previous file with comments | « chrome/common/extensions/docs/static/manifest.html ('k') | chrome/common/extensions/docs/tabs.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698