chrome/common/extensions/docs/options.html - Issue 314012: Adding documentation for extensions options pages.

Unified Diff: chrome/common/extensions/docs/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

Index: chrome/common/extensions/docs/options.html

===================================================================

--- chrome/common/extensions/docs/options.html (revision 0)

+++ chrome/common/extensions/docs/options.html (revision 0)

@@ -0,0 +1,487 @@

+<!DOCTYPE html><!-- This page is a placeholder for generated extensions api doc. Note:

+ 1) The <head> information in this page is significant, should be uniform

+ across api docs and should be edited only with knowledge of the

+ templating mechanism.

+ 3) All <body>.innerHTML is genereated as an rendering step. If viewed in a

+ browser, it will be re-generated from the template, json schema and

+ authored overview content.

+ 4) The <body>.innerHTML is also generated by an offline step so that this

+ page may easily be indexed by search engines.

+--><html xmlns="http://www.w3.org/1999/xhtml"><head>

+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

+ <link href="css/ApiRefStyles.css" rel="stylesheet" type="text/css">

+ <link href="css/print.css" rel="stylesheet" type="text/css" media="print">

+ <script type="text/javascript" src="../../../third_party/jstemplate/jstemplate_compiled.js">

+ </script>

+ <script type="text/javascript" src="js/api_page_generator.js"></script>

+ <script type="text/javascript" src="js/bootstrap.js"></script>

+ <title>Options</title></head><body> <div id="container">

+

+ <!-- In particular, sub-templates that recurse, must be used by allowing

+ jstemplate to make a copy of the template in this section which

+ are not operated on by way of the jsskip="true" -->

+ <div style="display:none">

+

+ <div id="valueTemplate">

+ <dt>

+ <var>paramName</var>

+ <em>

+

+ <div style="display:inline">

+ (

+ <span class="optional">optional</span>

+ <span id="typeTemplate">

+ <span>

+ <a> Type</a>

+ </span>

+ <span>

+ array of <span><span></span></span>

+ </span>

+ <span>paramType</span>

+ </span>

+ )

+ </div>

+ </em>

+ </dt>

+ <dd class="todo">

+ Undocumented.

+ </dd>

+ <dd>

+ Description of this parameter from the json schema.

+ </dd>

+

+ <dd>

+ <dl>

+ <div>

+ </div>

+ </dl>

+ </dd>

+ </div>

+ </div>

+ <a name="top"> </a>

+

+ <div id="pageHeader">

+ <div id="searchbox">

+ <form action="http://www.google.com/cse" id="cse-search-box">

+ <div>

+ <input type="hidden" name="cx" value="002967670403910741006:61_cvzfqtno">

+ <input type="hidden" name="ie" value="UTF-8">

+ <input type="text" name="q" size="31">

+ <input type="submit" name="sa" value="Search">

+ </div>

+ </form>

+ <script type="text/javascript" src="http://www.google.com/jsapi"></script>

+ <script type="text/javascript">google.load("elements", "1", {packages: "transliteration"});</script>

+ <script type="text/javascript" src="http://www.google.com/coop/cse/t13n?form=cse-search-box&t13n_langs=en"></script>

+ <script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&lang=en"></script>

+ </div>

+ <div id="pageTitle">

+ <h1>Options</h1>

+ </div>

+ </div>

+ <div id="pageContent">

+

+ <div id="leftNav">

+ <ul>

+ <li> <a href="index.html">Home</a></li>

+ <li> <a href="getstarted.html">Getting Started</a></li>

+ <li> <a href="overview.html">Overview</a></li>

+ <li> <a href="devguide.html"><div>Developer's Guide</div></a>

+ <ul>

+ <li> UI Surfaces

+ <ul>

+ <li><a href="browserAction.html">Browser Actions</a></li>

+ <li><a href="ntp.html">New Tab Pages</a></li>

+ <li><a href="pageAction.html">Page Actions</a></li>

+ <li><a href="themes.html">Themes</a></li>

+ </ul>

+ </li>

+ <li> More Interaction

+ <ul>

+ <li><a href="bookmarks.html">Bookmarks</a></li>

+ <li><a href="events.html">Events</a></li>

+ <li class="leftNavSelected">Options Page</li>

+ <li><a href="tabs.html">Tabs</a></li>

+ <li><a href="windows.html">Windows</a></li>

+ </ul>

+ </li>

+ <li> Implementation

+ <ul>

+ <li><a href="background_pages.html">Background Pages</a></li>

+ <li><a href="content_scripts.html">Content Scripts</a></li>

+ <li><a href="xhr.html">Cross-Origin XHR</a></li>

+ <li><a href="npapi.html">NPAPI Plugins</a></li>

+ </ul>

+ </li>

+ <li> Finishing

+ <ul>

+ <li><a href="autoupdate.html">Autoupdating</a></li>

+ <li><a href="packaging.html">Packaging</a></li>

+ </ul>

+ </li>

+ </ul>

+ </li>

+ <li><a href="tutorials.html"><div>Tutorials</div></a>

+ <ul>

+ <li><a href="tut_debugging.html">Debugging</a></li>

+ </ul>

+ </li>

+ <li>Reference

+ <ul>

+ <li> Formats

+ <ul>

+ <li><a href="manifest.html">Manifest Files</a></li>

+ <li><a href="match_patterns.html">Match Patterns</a></li>

+

+ </ul>

+ </li>

+ <li> <a href="api_index.html">chrome.* APIs</a> </li>

+ <li> <a href="api_other.html">Other APIs</a> </li>

+ </ul>

+ </li>

+ <li><a href="http://dev.chromium.org/developers/design-documents/extensions/samples">Samples</a></li>

+ </ul>

+ </div>

+ <div id="mainColumn">

+

+ <div id="toc">

+ <p>Contents</p>

+ <ol>

+ <li jsinstance="0">

+ <a href="#H2-0">Step 1: Declare your options page in the manifest</a>

+ <ol>

+ <li jsinstance="*0" style="display: none; ">

+ <a>h3Name</a>

+ </li>

+ </ol>

+ </li><li jsinstance="1">

+ <a href="#H2-1">Step 2: Write your options page</a>

+ <ol>

+ <li jsinstance="*0" style="display: none; ">

+ <a>h3Name</a>

+ </li>

+ </ol>

+ </li><li jsinstance="*2">

+ <a href="#H2-2">Important Notes</a>

+ <ol>

+ <li jsinstance="*0" style="display: none; ">

+ <a>h3Name</a>

+ </li>

+ </ol>

+ </li>

+ <div style="display: none; ">

+ <li>

+ <a href="#apiReference">API reference</a>

+ <ol>

+ <li>

+ <a href="#properties">Properties</a>

+ <ol>

+ <li>

+ <a href="#property-anchor">propertyName</a>

+ </li>

+ </ol>

+ </li>

+ <li>

+ <a href="#methods">Methods</a>

+ <ol>

+ <li>

+ <a href="#method-anchor">methodName</a>

+ </li>

+ </ol>

+ </li>

+ <li>

+ <a href="#events">Events</a>

+ <ol>

+ <li>

+ <a href="#event-anchor">eventName</a>

+ </li>

+ </ol>

+ </li>

+ <li>

+ <a href="#types">Types</a>

+ <ol>

+ <li>

+ <a href="#id-anchor">id</a>

+ </li>

+ </ol>

+ </li>

+ </ol>

+ </li>

+ </div>

+ </ol>

+ </div>

+

+

+ <div id="static"><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.

+</p><a name="H2-0"></a><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>

+<a name="H2-1"></a><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>

+<a name="H2-2"></a><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>

+</div>

+

+ <div class="apiPage" style="display: none; ">

+ <a name="apiReference"></a>

+ <h2>API reference: chrome.apiname </h2>

+

+ <div class="apiGroup">

+ <a name="properties"></a>

+ <h3 id="properties">Properties</h3>

+ <div>

+ <a></a>

+ <h4>getLastError</h4>

+ <div class="summary">

+

+ <span>chrome.extension</span><span>lastError</span>

+ </div>

+ <div>

+ </div>

+ </div>

+

+ <div class="apiGroup" id="methods">

+ <a name="methods"></a>

+ <h3>Methods</h3>

+

+ <div class="apiItem">

+ <a></a>

+ <h4>method name</h4>

+ <div class="summary"><span>void</span>

+

+ <span>chrome.module.methodName</span>(<span><span>, </span><span></span>

+ <var><span></span></var></span>)</div>

+ <div class="description">

+ <p class="todo">Undocumented.</p>

+ <p>

+ A description from the json schema def of the function goes here.

+ </p>

+

+ <h4>Parameters</h4>

+ <dl>

+ <div>

+ </div>

+ </dl>

+

+ <h4>Returns</h4>

+ <dl>

+ <div>

+ </div>

+ </dl>

+

+ <div>

+ <h4>Callback function</h4>

+ <p>

+ If you specify the <em>callback</em> parameter,

+ it should specify a function that looks like this:

+ </p>

+

+ <pre>function(<span>Type param1, Type param2</span>) <span class="subdued">{...}</span>);</pre>

+ <dl>

+ <div>

+ </div>

+ </dl>

+ </div>

+ </div>

+ </div>

+ </div>

+

+ <div class="apiGroup">

+ <a name="events"></a>

+ <h3 id="events">Events</h3>

+

+ <div class="apiItem">

+ <a></a>

+ <h4>event name</h4>

+ <div class="summary">

+

+ <span class="subdued">chrome.bookmarks</span><span>onEvent</span><span class="subdued">.addListener</span>(function(<span>Type param1, Type param2</span>) <span class="subdued">{...}</span>);

+ </div>

+ <div class="description">

+ <p class="todo">Undocumented.</p>

+ <p>

+ A description from the json schema def of the event goes here.

+ </p>

+

+ <h4>Parameters</h4>

+ <dl>

+ <div>

+ </div>

+ </dl>

+ </div>

+ </div>

+ </div>

+

+ <div class="apiGroup">

+ <a name="types.sort(sortByName)"></a>

+ <h3 id="types">Types</h3>

+

+ <div class="apiItem">

+ <a></a>

+ <h4>type name</h4>

+ <div>

+ </div>

+ </div>

+ </div>

+ </div>

+ </div>

+ </div>

+ <div id="pageFooter" --="">

+ <p>

+ Except as otherwise <a href="http://code.google.com/policies.html#restrictions">noted</a>,

+ the content of this page is licensed under the <a rel="license" href="http://creativecommons.org/licenses/by/3.0/">Creative Commons

+ Attribution 3.0 License</a>, and code samples are licensed under the

+ <a rel="license" href="http://code.google.com/google_bsd_license.html">BSD License</a>.

+ </p>

+ <p>

+ </p>

+

+<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>

+<script src="http://www.google-analytics.com/ga.js" type="text/javascript"></script>

+<script type="text/javascript">

+ // chrome doc tracking

+ try {

+ var engdocs = _gat._getTracker("YT-10763712-2");

+ engdocs._trackPageview();

+ } catch(err) {}

+ // code.google.com site-wide tracking

+ try {

+ _uacct="UA-18071-1";

+ _uanchor=1;

+ _uff=0;

+ urchinTracker();

+ }

+ catch(e) {/* urchinTracker not available. */}

+</script>

+

+ </div>

+ </div>

+</body></html>

Property changes on: chrome\common\extensions\docs\options.html

___________________________________________________________________

Added: svn:eol-style

+ LF

« no previous file with comments | « chrome/common/extensions/docs/ntp.html ('k') | chrome/common/extensions/docs/overview.html » ('j') | no next file with comments »