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

Side by Side 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 unified diff | Download patch | Annotate | Revision Log
Property Changes:
Added: svn:eol-style
+ LF
OLDNEW
(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 &lt;html>
22 &lt;head>&lt;title>My Test Extension Options&lt;/title>&lt;/head>
23 &lt;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 &lt; 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 &lt;/script>
56
57 &lt;body onload="restore_options()">
58
59 Favorite Color:
60 &lt;select id="color">
61 &lt;option value="red">red&lt;/option>
62 &lt;option value="green">green&lt;/option>
63 &lt;option value="blue">blue&lt;/option>
64 &lt;option value="yellow">yellow&lt;/option>
65 &lt;/select>
66
67 &lt;br>
68 &lt;button onclick="save_options()">Save&lt;/button>
69 &lt;/body>
70 &lt;/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>
OLDNEW
« 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