| OLD | NEW |
|---|
| (Empty) | |
| 1 <!DOCTYPE html><!-- This page is a placeholder for generated extensions api doc.
Note: |
| 2 1) The <head> information in this page is significant, should be uniform |
| 3 across api docs and should be edited only with knowledge of the |
| 4 templating mechanism. |
| 5 3) All <body>.innerHTML is genereated as an rendering step. If viewed in a |
| 6 browser, it will be re-generated from the template, json schema and |
| 7 authored overview content. |
| 8 4) The <body>.innerHTML is also generated by an offline step so that this |
| 9 page may easily be indexed by search engines. |
| 10 --><html xmlns="http://www.w3.org/1999/xhtml"><head> |
| 11 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> |
| 12 <link href="css/ApiRefStyles.css" rel="stylesheet" type="text/css"> |
| 13 <link href="css/print.css" rel="stylesheet" type="text/css" media="print"> |
| 14 <script type="text/javascript" src="../../../third_party/jstemplate/jstempla
te_compiled.js"> |
| 15 </script> |
| 16 <script type="text/javascript" src="js/api_page_generator.js"></script> |
| 17 <script type="text/javascript" src="js/bootstrap.js"></script> |
| 18 <title>Options</title></head><body> <div id="container"> |
| 19 <!-- SUBTEMPLATES: DO NOT MOVE FROM THIS LOCATION --> |
| 20 <!-- In particular, sub-templates that recurse, must be used by allowing |
| 21 jstemplate to make a copy of the template in this section which |
| 22 are not operated on by way of the jsskip="true" --> |
| 23 <div style="display:none"> |
| 24 |
| 25 <!-- VALUE --> |
| 26 <div id="valueTemplate"> |
| 27 <dt> |
| 28 <var>paramName</var> |
| 29 <em> |
| 30 |
| 31 <!-- TYPE --> |
| 32 <div style="display:inline"> |
| 33 ( |
| 34 <span class="optional">optional</span> |
| 35 <span id="typeTemplate"> |
| 36 <span> |
| 37 <a> Type</a> |
| 38 </span> |
| 39 <span> |
| 40 <span> |
| 41 array of <span><span></span></span> |
| 42 </span> |
| 43 <span>paramType</span> |
| 44 </span> |
| 45 </span> |
| 46 ) |
| 47 </div> |
| 48 |
| 49 </em> |
| 50 </dt> |
| 51 <dd class="todo"> |
| 52 Undocumented. |
| 53 </dd> |
| 54 <dd> |
| 55 Description of this parameter from the json schema. |
| 56 </dd> |
| 57 |
| 58 <!-- OBJECT PROPERTIES --> |
| 59 <dd> |
| 60 <dl> |
| 61 <div> |
| 62 <div> |
| 63 </div> |
| 64 </div> |
| 65 </dl> |
| 66 </dd> |
| 67 </div> <!-- /VALUE --> |
| 68 |
| 69 </div> <!-- /SUBTEMPLATES --> |
| 70 |
| 71 <a name="top"> </a> |
| 72 <!-- API HEADER --> |
| 73 <div id="pageHeader"> |
| 74 <div id="searchbox"> |
| 75 <form action="http://www.google.com/cse" id="cse-search-box"> |
| 76 <div> |
| 77 <input type="hidden" name="cx" value="002967670403910741006:61_cvzfq
tno"> |
| 78 <input type="hidden" name="ie" value="UTF-8"> |
| 79 <input type="text" name="q" size="31"> |
| 80 <input type="submit" name="sa" value="Search"> |
| 81 </div> |
| 82 </form> |
| 83 |
| 84 <script type="text/javascript" src="http://www.google.com/jsapi"></scrip
t> |
| 85 <script type="text/javascript">google.load("elements", "1", {packages: "
transliteration"});</script> |
| 86 <script type="text/javascript" src="http://www.google.com/coop/cse/t13n?
form=cse-search-box&t13n_langs=en"></script> |
| 87 <script type="text/javascript" src="http://www.google.com/coop/cse/brand
?form=cse-search-box&lang=en"></script> |
| 88 </div> |
| 89 <div id="pageTitle"> |
| 90 <h1>Options</h1> |
| 91 </div> |
| 92 </div> <!-- /pageHeader --> |
| 93 |
| 94 <div id="pageContent"> |
| 95 <!-- SIDENAV --> |
| 96 <div id="leftNav"> |
| 97 <ul> |
| 98 <li> <a href="index.html">Home</a></li> |
| 99 <li> <a href="getstarted.html">Getting Started</a></li> |
| 100 <li> <a href="overview.html">Overview</a></li> |
| 101 <li> <a href="devguide.html"><div>Developer's Guide</div></a> |
| 102 <ul> |
| 103 <li> UI Surfaces |
| 104 <ul> |
| 105 <li><a href="browserAction.html">Browser Actions</a></li> |
| 106 <li><a href="ntp.html">New Tab Pages</a></li> |
| 107 <li><a href="pageAction.html">Page Actions</a></li> |
| 108 <li><a href="themes.html">Themes</a></li> |
| 109 </ul> |
| 110 </li> |
| 111 <li> More Interaction |
| 112 <ul> |
| 113 <li><a href="bookmarks.html">Bookmarks</a></li> |
| 114 <li><a href="events.html">Events</a></li> |
| 115 <li class="leftNavSelected">Options Page</li> |
| 116 <li><a href="tabs.html">Tabs</a></li> |
| 117 <li><a href="windows.html">Windows</a></li> |
| 118 </ul> |
| 119 </li> |
| 120 <li> Implementation |
| 121 <ul> |
| 122 <li><a href="background_pages.html">Background Pages</a></li> |
| 123 <li><a href="content_scripts.html">Content Scripts</a></li> |
| 124 <li><a href="xhr.html">Cross-Origin XHR</a></li> |
| 125 <li><a href="npapi.html">NPAPI Plugins</a></li> |
| 126 </ul> |
| 127 </li> |
| 128 <li> Finishing |
| 129 <ul> |
| 130 <li><a href="autoupdate.html">Autoupdating</a></li> |
| 131 <li><a href="packaging.html">Packaging</a></li> |
| 132 </ul> |
| 133 </li> |
| 134 </ul> |
| 135 </li> |
| 136 <li><a href="tutorials.html"><div>Tutorials</div></a> |
| 137 <ul> |
| 138 <li><a href="tut_debugging.html">Debugging</a></li> |
| 139 </ul> |
| 140 </li> |
| 141 <li>Reference |
| 142 <ul> |
| 143 <li> Formats |
| 144 <ul> |
| 145 <li><a href="manifest.html">Manifest Files</a></li> |
| 146 <li><a href="match_patterns.html">Match Patterns</a></li> |
| 147 <!-- <li>Packages (.crx)</li> --> |
| 148 </ul> |
| 149 </li> |
| 150 <li> <a href="api_index.html">chrome.* APIs</a> </li> |
| 151 <li> <a href="api_other.html">Other APIs</a> </li> |
| 152 </ul> |
| 153 </li> |
| 154 <li><a href="http://dev.chromium.org/developers/design-documents/extens
ions/samples">Samples</a></li> |
| 155 </ul> |
| 156 </div> |
| 157 |
| 158 <div id="mainColumn"> |
| 159 <!-- TABLE OF CONTENTS --> |
| 160 <div id="toc"> |
| 161 <p>Contents</p> |
| 162 <ol> |
| 163 <li jsinstance="0"> |
| 164 <a href="#H2-0">Step 1: Declare your options page in the manifest<
/a> |
| 165 <ol> |
| 166 <li jsinstance="*0" style="display: none; "> |
| 167 <a>h3Name</a> |
| 168 </li> |
| 169 </ol> |
| 170 </li><li jsinstance="1"> |
| 171 <a href="#H2-1">Step 2: Write your options page</a> |
| 172 <ol> |
| 173 <li jsinstance="*0" style="display: none; "> |
| 174 <a>h3Name</a> |
| 175 </li> |
| 176 </ol> |
| 177 </li><li jsinstance="*2"> |
| 178 <a href="#H2-2">Important Notes</a> |
| 179 <ol> |
| 180 <li jsinstance="*0" style="display: none; "> |
| 181 <a>h3Name</a> |
| 182 </li> |
| 183 </ol> |
| 184 </li> |
| 185 <div style="display: none; "> |
| 186 <li> |
| 187 <a href="#apiReference">API reference</a> |
| 188 <ol> |
| 189 <li> |
| 190 <a href="#properties">Properties</a> |
| 191 <ol> |
| 192 <li> |
| 193 <a href="#property-anchor">propertyName</a> |
| 194 </li> |
| 195 </ol> |
| 196 </li> |
| 197 <li> |
| 198 <a href="#methods">Methods</a> |
| 199 <ol> |
| 200 <li> |
| 201 <a href="#method-anchor">methodName</a> |
| 202 </li> |
| 203 </ol> |
| 204 </li> |
| 205 <li> |
| 206 <a href="#events">Events</a> |
| 207 <ol> |
| 208 <li> |
| 209 <a href="#event-anchor">eventName</a> |
| 210 </li> |
| 211 </ol> |
| 212 </li> |
| 213 <li> |
| 214 <a href="#types">Types</a> |
| 215 <ol> |
| 216 <li> |
| 217 <a href="#id-anchor">id</a> |
| 218 </li> |
| 219 </ol> |
| 220 </li> |
| 221 </ol> |
| 222 </li> |
| 223 </div> |
| 224 </ol> |
| 225 </div> |
| 226 <!-- /TABLE OF CONTENTS --> |
| 227 |
| 228 <!-- STATIC CONTENT PLACEHOLDER --> |
| 229 <div id="static"><div id="pageData-title" class="pageData">Options</div> |
| 230 <div id="pageData-showTOC" class="pageData">true</div> |
| 231 <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. |
| 232 |
| 233 </p><a name="H2-0"></a><h2>Step 1: Declare your options page in the manifest</h2
> |
| 234 |
| 235 <pre>{ |
| 236 "name": "Test Extension", |
| 237 "version": "1.0", |
| 238 "description": "This is a test", |
| 239 <b>"options_page": "options.html"</b> |
| 240 } |
| 241 </pre> |
| 242 |
| 243 |
| 244 <a name="H2-1"></a><h2>Step 2: Write your options page</h2> |
| 245 |
| 246 Here is an example options page: |
| 247 |
| 248 <pre><html> |
| 249 <head><title>My Test Extension Options</title></head> |
| 250 <script type="text/javascript"> |
| 251 |
| 252 // Saves options to localStorage. |
| 253 function save_options() { |
| 254 var select = document.getElementById("color"); |
| 255 var color = select.children[select.selectedIndex].value; |
| 256 localStorage["favorite_color"] = color; |
| 257 |
| 258 // Update status to let user know options were saved. |
| 259 var status = document.getElementById("status"); |
| 260 status.innerHTML = "Options Saved."; |
| 261 setTimeout(function() { |
| 262 status.innerHTML = ""; |
| 263 }, 750); |
| 264 } |
| 265 |
| 266 // Restores select box state to saved value from localStorage. |
| 267 function restore_options() { |
| 268 var favorite = localStorage["favorite_color"]; |
| 269 if (!favorite) { |
| 270 return; |
| 271 } |
| 272 var select = document.getElementById("color"); |
| 273 for (var i = 0; i < select.children.length; i++) { |
| 274 var child = select.children[i]; |
| 275 if (child.value == favorite) { |
| 276 child.selected = "true"; |
| 277 break; |
| 278 } |
| 279 } |
| 280 } |
| 281 |
| 282 </script> |
| 283 |
| 284 <body onload="restore_options()"> |
| 285 |
| 286 Favorite Color: |
| 287 <select id="color"> |
| 288 <option value="red">red</option> |
| 289 <option value="green">green</option> |
| 290 <option value="blue">blue</option> |
| 291 <option value="yellow">yellow</option> |
| 292 </select> |
| 293 |
| 294 <br> |
| 295 <button onclick="save_options()">Save</button> |
| 296 </body> |
| 297 </html> |
| 298 </pre> |
| 299 |
| 300 <a name="H2-2"></a><h2>Important Notes</h2> |
| 301 <ul> |
| 302 <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> |
| 303 <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> |
| 304 </ul> |
| 305 </div> |
| 306 |
| 307 <!-- API PAGE --> |
| 308 <div class="apiPage" style="display: none; "> |
| 309 <a name="apiReference"></a> |
| 310 <h2>API reference: chrome.apiname </h2> |
| 311 |
| 312 <!-- PROPERTIES --> |
| 313 <div class="apiGroup"> |
| 314 <a name="properties"></a> |
| 315 <h3 id="properties">Properties</h3> |
| 316 |
| 317 <div> |
| 318 <a></a> |
| 319 <h4>getLastError</h4> |
| 320 <div class="summary"> |
| 321 <!-- Note: intentionally longer 80 columns --> |
| 322 <span>chrome.extension</span><span>lastError</span> |
| 323 </div> |
| 324 <div> |
| 325 </div> |
| 326 </div> |
| 327 |
| 328 </div> <!-- /apiGroup --> |
| 329 |
| 330 <!-- METHODS --> |
| 331 <div class="apiGroup" id="methods"> |
| 332 <a name="methods"></a> |
| 333 <h3>Methods</h3> |
| 334 |
| 335 <!-- iterates over all functions --> |
| 336 <div class="apiItem"> |
| 337 <a></a> <!-- method-anchor --> |
| 338 <h4>method name</h4> |
| 339 |
| 340 <div class="summary"><span>void</span> |
| 341 <!-- Note: intentionally longer 80 columns --> |
| 342 <span>chrome.module.methodName</span>(<span><span>, </span><sp
an></span> |
| 343 <var><span></span></var></span>)</div> |
| 344 |
| 345 <div class="description"> |
| 346 <p class="todo">Undocumented.</p> |
| 347 <p> |
| 348 A description from the json schema def of the function goes he
re. |
| 349 </p> |
| 350 |
| 351 <!-- PARAMETERS --> |
| 352 <h4>Parameters</h4> |
| 353 <dl> |
| 354 <div> |
| 355 <div> |
| 356 </div> |
| 357 </div> |
| 358 </dl> |
| 359 |
| 360 <!-- RETURNS --> |
| 361 <h4>Returns</h4> |
| 362 <dl> |
| 363 <div> |
| 364 <div> |
| 365 </div> |
| 366 </div> |
| 367 </dl> |
| 368 |
| 369 <!-- CALLBACK --> |
| 370 <div> |
| 371 <div> |
| 372 <h4>Callback function</h4> |
| 373 <p> |
| 374 If you specify the <em>callback</em> parameter, |
| 375 it should specify a function that looks like this: |
| 376 </p> |
| 377 |
| 378 <!-- Note: intentionally longer 80 columns --> |
| 379 <pre>function(<span>Type param1, Type param2</span>) <span cla
ss="subdued">{...}</span>);</pre> |
| 380 <dl> |
| 381 <div> |
| 382 <div> |
| 383 </div> |
| 384 </div> |
| 385 </dl> |
| 386 </div> |
| 387 </div> |
| 388 |
| 389 </div> <!-- /description --> |
| 390 |
| 391 </div> <!-- /apiItem --> |
| 392 |
| 393 </div> <!-- /apiGroup --> |
| 394 |
| 395 <!-- EVENTS --> |
| 396 <div class="apiGroup"> |
| 397 <a name="events"></a> |
| 398 <h3 id="events">Events</h3> |
| 399 |
| 400 <!-- iterates over all events --> |
| 401 <div class="apiItem"> |
| 402 <a></a> |
| 403 <h4>event name</h4> |
| 404 |
| 405 <div class="summary"> |
| 406 <!-- Note: intentionally longer 80 columns --> |
| 407 <span class="subdued">chrome.bookmarks</span><span>onEvent</span
><span class="subdued">.addListener</span>(function(<span>Type param1, Type para
m2</span>) <span class="subdued">{...}</span>); |
| 408 </div> |
| 409 |
| 410 <div class="description"> |
| 411 <p class="todo">Undocumented.</p> |
| 412 <p> |
| 413 A description from the json schema def of the event goes here. |
| 414 </p> |
| 415 |
| 416 <!-- PARAMETERS --> |
| 417 <h4>Parameters</h4> |
| 418 <dl> |
| 419 <div> |
| 420 <div> |
| 421 </div> |
| 422 </div> |
| 423 </dl> |
| 424 |
| 425 </div> <!-- /decription --> |
| 426 |
| 427 </div> <!-- /apiItem --> |
| 428 |
| 429 </div> <!-- /apiGroup --> |
| 430 |
| 431 <!-- TYPES --> |
| 432 <div class="apiGroup"> |
| 433 <a name="types.sort(sortByName)"></a> |
| 434 <h3 id="types">Types</h3> |
| 435 |
| 436 <!-- iterates over all types --> |
| 437 <div class="apiItem"> |
| 438 <a></a> |
| 439 <h4>type name</h4> |
| 440 |
| 441 <div> |
| 442 </div> |
| 443 |
| 444 </div> <!-- /apiItem --> |
| 445 |
| 446 </div> <!-- /apiGroup --> |
| 447 |
| 448 </div> <!-- /apiPage --> |
| 449 </div> <!-- /mainColumn --> |
| 450 </div> <!-- /pageContent --> |
| 451 <div id="pageFooter" --=""> |
| 452 <p> |
| 453 Except as otherwise <a href="http://code.google.com/policies.html#restrictions
">noted</a>, |
| 454 the content of this page is licensed under the <a rel="license" href="http://c
reativecommons.org/licenses/by/3.0/">Creative Commons |
| 455 Attribution 3.0 License</a>, and code samples are licensed under the |
| 456 <a rel="license" href="http://code.google.com/google_bsd_license.html">BSD Lic
ense</a>. |
| 457 </p> |
| 458 <p> |
| 459 ©2009 Google |
| 460 </p> |
| 461 |
| 462 <!-- begin analytics --> |
| 463 <script src="http://www.google-analytics.com/urchin.js" type="text/javascript"><
/script> |
| 464 <script src="http://www.google-analytics.com/ga.js" type="text/javascript"></scr
ipt> |
| 465 |
| 466 <script type="text/javascript"> |
| 467 // chrome doc tracking |
| 468 try { |
| 469 var engdocs = _gat._getTracker("YT-10763712-2"); |
| 470 engdocs._trackPageview(); |
| 471 } catch(err) {} |
| 472 |
| 473 // code.google.com site-wide tracking |
| 474 try { |
| 475 _uacct="UA-18071-1"; |
| 476 _uanchor=1; |
| 477 _uff=0; |
| 478 urchinTracker(); |
| 479 } |
| 480 catch(e) {/* urchinTracker not available. */} |
| 481 </script> |
| 482 <!-- end analytics --> |
| 483 |
| 484 </div> <!-- /pageFooter --> |
| 485 </div> <!-- /container --> |
| 486 </body></html> |
| 487 |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 314012:
Adding documentation for extensions options pages. (Closed)
Base URL: svn://chrome-svn/chrome/trunk/src/