overview.html revision 21d179b334e59e9a3bfcaed4c4430bef1bc5759d
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/jstemplate_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 <script type="text/javascript" src="js/sidebar.js"></script> 19 <title>Overview - Google Chrome Extensions - Google Code</title></head> 20 <body> <div id="gc-container" class="labs"> 21 <div id="devModeWarning"> 22 You are viewing extension docs in chrome via the 'file:' scheme: are you expecting to see local changes when you refresh? You'll need run chrome with --allow-file-access-from-files. 23 </div> 24 <!-- SUBTEMPLATES: DO NOT MOVE FROM THIS LOCATION --> 25 <!-- In particular, sub-templates that recurse, must be used by allowing 26 jstemplate to make a copy of the template in this section which 27 are not operated on by way of the jsskip="true" --> 28 <div style="display:none"> 29 30 <!-- VALUE --> 31 <div id="valueTemplate"> 32 <dt> 33 <var>paramName</var> 34 <em> 35 36 <!-- TYPE --> 37 <div style="display:inline"> 38 ( 39 <span class="optional">optional</span> 40 <span class="enum">enumerated</span> 41 <span id="typeTemplate"> 42 <span> 43 <a> Type</a> 44 </span> 45 <span> 46 <span> 47 array of <span><span></span></span> 48 </span> 49 <span>paramType</span> 50 <span></span> 51 </span> 52 </span> 53 ) 54 </div> 55 56 </em> 57 </dt> 58 <dd class="todo"> 59 Undocumented. 60 </dd> 61 <dd> 62 Description of this parameter from the json schema. 63 </dd> 64 <dd> 65 This parameter was added in version 66 <b><span></span></b>. 67 You must omit this parameter in earlier versions, 68 and you may omit it in any version. If you require this 69 parameter, the manifest key 70 <a href="manifest.html#minimum_chrome_version">minimum_chrome_version</a> 71 can ensure that your extension won't be run in an earlier browser version. 72 </dd> 73 74 <!-- OBJECT PROPERTIES --> 75 <dd> 76 <dl> 77 <div> 78 <div> 79 </div> 80 </div> 81 </dl> 82 </dd> 83 84 <!-- FUNCTION PARAMETERS --> 85 <dd> 86 <div></div> 87 </dd> 88 89 </div> <!-- /VALUE --> 90 91 <div id="functionParametersTemplate"> 92 <h5>Parameters</h5> 93 <dl> 94 <div> 95 <div> 96 </div> 97 </div> 98 </dl> 99 </div> 100 </div> <!-- /SUBTEMPLATES --> 101 102 <a id="top"></a> 103 <div id="skipto"> 104 <a href="#gc-pagecontent">Skip to page content</a> 105 <a href="#gc-toc">Skip to main navigation</a> 106 </div> 107 <!-- API HEADER --> 108 <table id="header" width="100%" cellspacing="0" border="0"> 109 <tbody><tr> 110 <td valign="middle"><a href="http://code.google.com/"><img src="images/code_labs_logo.gif" height="43" width="161" alt="Google Code Labs" style="border:0; margin:0;"></a></td> 111 <td valign="middle" width="100%" style="padding-left:0.6em;"> 112 <form action="http://www.google.com/cse" id="cse" style="margin-top:0.5em"> 113 <div id="gsc-search-box"> 114 <input type="hidden" name="cx" value="002967670403910741006:61_cvzfqtno"> 115 <input type="hidden" name="ie" value="UTF-8"> 116 <input type="text" name="q" value="" size="55"> 117 <input class="gsc-search-button" type="submit" name="sa" value="Search"> 118 <br> 119 <span class="greytext">e.g. "page action" or "tabs"</span> 120 </div> 121 </form> 122 123 <script type="text/javascript" src="http://www.google.com/jsapi"></script> 124 <script type="text/javascript">google.load("elements", "1", {packages: "transliteration"});</script> 125 <script type="text/javascript" src="http://www.google.com/coop/cse/t13n?form=cse&t13n_langs=en"></script> 126 <script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse&lang=en"></script> 127 </td> 128 </tr> 129 </tbody></table> 130 131 <div id="codesiteContent" class=""> 132 133 <a id="gc-topnav-anchor"></a> 134 <div id="gc-topnav"> 135 <h1>Google Chrome Extensions (<a href="http://code.google.com/labs/">Labs</a>)</h1> 136 <ul id="home" class="gc-topnav-tabs"> 137 <li id="home_link"> 138 <a href="index.html" title="Google Chrome Extensions home page">Home</a> 139 </li> 140 <li id="docs_link"> 141 <a href="docs.html" title="Official Google Chrome Extensions documentation">Docs</a> 142 </li> 143 <li id="faq_link"> 144 <a href="faq.html" title="Answers to frequently asked questions about Google Chrome Extensions">FAQ</a> 145 </li> 146 <li id="samples_link"> 147 <a href="samples.html" title="Sample extensions (with source code)">Samples</a> 148 </li> 149 <li id="group_link"> 150 <a href="http://groups.google.com/a/chromium.org/group/chromium-extensions" title="Google Chrome Extensions developer forum">Group</a> 151 </li> 152 </ul> 153 </div> <!-- end gc-topnav --> 154 155 <div class="g-section g-tpl-170"> 156 <!-- SIDENAV --> 157 <div class="g-unit g-first" id="gc-toc"> 158 <ul> 159 <li><a href="getstarted.html">Getting Started</a></li> 160 <li class="leftNavSelected">Overview</li> 161 <li><a href="whats_new.html">What's New?</a></li> 162 <li><h2><a href="devguide.html">Developer's Guide</a></h2> 163 <ul> 164 <li>Browser UI 165 <ul> 166 <li><a href="browserAction.html">Browser Actions</a></li> 167 <li><a href="contextMenus.html">Context Menus</a></li> 168 <li><a href="notifications.html">Desktop Notifications</a></li> 169 <li><a href="omnibox.html">Omnibox</a></li> 170 <li><a href="options.html">Options Pages</a></li> 171 <li><a href="override.html">Override Pages</a></li> 172 <li><a href="pageAction.html">Page Actions</a></li> 173 </ul> 174 </li> 175 <li>Browser Interaction 176 <ul> 177 <li><a href="bookmarks.html">Bookmarks</a></li> 178 <li><a href="cookies.html">Cookies</a></li> 179 <li><a href="events.html">Events</a></li> 180 <li><a href="history.html">History</a></li> 181 <li><a href="management.html">Management</a></li> 182 <li><a href="tabs.html">Tabs</a></li> 183 <li><a href="windows.html">Windows</a></li> 184 </ul> 185 </li> 186 <li>Implementation 187 <ul> 188 <li><a href="a11y.html">Accessibility</a></li> 189 <li><a href="background_pages.html">Background Pages</a></li> 190 <li><a href="content_scripts.html">Content Scripts</a></li> 191 <li><a href="xhr.html">Cross-Origin XHR</a></li> 192 <li><a href="idle.html">Idle</a></li> 193 <li><a href="i18n.html">Internationalization</a></li> 194 <li><a href="messaging.html">Message Passing</a></li> 195 <li><a href="npapi.html">NPAPI Plugins</a></li> 196 </ul> 197 </li> 198 <li>Finishing 199 <ul> 200 <li><a href="hosting.html">Hosting</a></li> 201 <li><a href="external_extensions.html">Other Deployment Options</a></li> 202 </ul> 203 </li> 204 </ul> 205 </li> 206 <li><h2><a href="apps.html">Packaged Apps</a></h2></li> 207 <li><h2><a href="tutorials.html">Tutorials</a></h2> 208 <ul> 209 <li><a href="tut_debugging.html">Debugging</a></li> 210 <li><a href="tut_analytics.html">Google Analytics</a></li> 211 <li><a href="tut_oauth.html">OAuth</a></li> 212 </ul> 213 </li> 214 <li><h2>Reference</h2> 215 <ul> 216 <li>Formats 217 <ul> 218 <li><a href="manifest.html">Manifest Files</a></li> 219 <li><a href="match_patterns.html">Match Patterns</a></li> 220 </ul> 221 </li> 222 <li><a href="permission_warnings.html">Permission Warnings</a></li> 223 <li><a href="api_index.html">chrome.* APIs</a></li> 224 <li><a href="api_other.html">Other APIs</a></li> 225 </ul> 226 </li> 227 <li><h2><a href="samples.html">Samples</a></h2></li> 228 <div class="line"> </div> 229 <li><h2>More</h2> 230 <ul> 231 <li><a href="http://code.google.com/chrome/webstore/docs/index.html">Chrome Web Store</a></li> 232 <li><a href="http://code.google.com/chrome/apps/docs/developers_guide.html">Hosted Apps</a></li> 233 <li><a href="themes.html">Themes</a></li> 234 </ul> 235 </li> 236 </ul> 237 </div> 238 <script> 239 initToggles(); 240 </script> 241 242 <div class="g-unit" id="gc-pagecontent"> 243 <div id="pageTitle"> 244 <h1 class="page_title">Overview</h1> 245 </div> 246 <!-- TABLE OF CONTENTS --> 247 <div id="toc"> 248 <h2>Contents</h2> 249 <ol> 250 <li> 251 <a href="#what">The basics</a> 252 <ol> 253 <li> 254 <a href="#extension-ui">Extension UIs</a> 255 </li><li> 256 <a href="#packagedapp-ui">Packaged app UIs</a> 257 </li> 258 </ol> 259 </li><li> 260 <a href="#files">Files</a> 261 <ol> 262 <li> 263 <a href="#relative-urls">Referring to files</a> 264 </li><li> 265 <a href="#H3-5">The manifest file</a> 266 </li> 267 </ol> 268 </li><li> 269 <a href="#arch">Architecture</a> 270 <ol> 271 <li> 272 <a href="#pages">Pages</a> 273 </li><li> 274 <a href="#contentScripts">Content scripts</a> 275 </li> 276 </ol> 277 </li><li> 278 <a href="#pageComm">Communication between pages </a> 279 <ol> 280 <li style="display: none; "> 281 <a>h3Name</a> 282 </li> 283 </ol> 284 </li><li> 285 <a href="#incognito"> Saving data and incognito mode </a> 286 <ol> 287 <li style="display: none; "> 288 <a>h3Name</a> 289 </li> 290 </ol> 291 </li><li> 292 <a href="#now-what"> Now what? </a> 293 <ol> 294 <li style="display: none; "> 295 <a>h3Name</a> 296 </li> 297 </ol> 298 </li> 299 <li style="display: none; "> 300 <a href="#apiReference">API reference</a> 301 <ol> 302 <li> 303 <a href="#properties">Properties</a> 304 <ol> 305 <li> 306 <a href="#property-anchor">propertyName</a> 307 </li> 308 </ol> 309 </li> 310 <li> 311 <a href="#methods">Methods</a> 312 <ol> 313 <li> 314 <a href="#method-anchor">methodName</a> 315 </li> 316 </ol> 317 </li> 318 <li> 319 <a href="#events">Events</a> 320 <ol> 321 <li> 322 <a href="#event-anchor">eventName</a> 323 </li> 324 </ol> 325 </li> 326 <li> 327 <a href="#types">Types</a> 328 <ol> 329 <li> 330 <a href="#id-anchor">id</a> 331 </li> 332 </ol> 333 </li> 334 </ol> 335 </li> 336 </ol> 337 </div> 338 <!-- /TABLE OF CONTENTS --> 339 340 <!-- Standard content lead-in for experimental API pages --> 341 <p id="classSummary" style="display: none; "> 342 For information on how to use experimental APIs, see the <a href="experimental.html">chrome.experimental.* APIs</a> page. 343 </p> 344 345 <!-- STATIC CONTENT PLACEHOLDER --> 346 <div id="static"><div id="pageData-name" class="pageData">Overview</div> 347<div id="pageData-showTOC" class="pageData">true</div> 348 349<p> 350Once you've finished this page 351and the 352<a href="getstarted.html">Getting Started</a> tutorial, 353you'll be all set to start writing extensions and packaged apps. 354</p> 355 356<p class="caution"> 357<strong>Note:</strong> 358<em>Packaged apps</em> are implemented as extensions, 359so unless otherwise stated, 360everything in this page applies to packaged apps. 361</p> 362 363<h2 id="what">The basics</h2> 364 365<p> 366An extension is a zipped bundle of files—HTML, 367CSS, JavaScript, images, and anything else you need—that 368adds functionality to the Google Chrome browser. 369Extensions are essentially web pages, 370and they can use all the 371<a href="api_other.html">APIs that the browser provides to web pages</a>, 372from XMLHttpRequest to JSON to HTML5. 373</p> 374 375<p> 376Extensions can interact with web pages or servers using 377<a href="content_scripts.html">content scripts</a> or 378<a href="xhr.html">cross-origin XMLHttpRequests</a>. 379Extensions can also interact programmatically 380with browser features such as 381<a href="bookmarks.html">bookmarks</a> 382and <a href="tabs.html">tabs</a>. 383</p> 384 385<h3 id="extension-ui">Extension UIs</h3> 386 387<p> 388Many extensions—but not packaged apps—add 389UI to Google Chrome in the form of 390<a href="browserAction.html">browser actions</a> 391or <a href="pageAction.html">page actions</a>. 392Each extension can have at most one browser action or page action. 393Choose a <b>browser action</b> when the extension is relevant to most pages. 394Choose a <b>page action</b> when the extension's icon 395should appear or disappear, 396depending on the page. 397</p> 398 399<table class="columns"> 400<tbody><tr> 401 <td> 402 <img src="images/index/gmail.png" width="150" height="79" alt="screenshot"> 403 </td> 404 <td> 405 <img src="images/index/news.png" width="150" height="79" alt="screenshot"> 406 </td> 407 <td> 408 <img src="images/index/rss.png" width="150" height="79" alt="screenshot"> 409 </td> 410</tr> 411 412<tr> 413 <td> 414 This <a href="samples.html#gmail">mail extension</a> 415 uses a <em>browser action</em> 416 (icon in the toolbar). 417 </td> 418 <td> 419 This <a href="samples.html#news">news reader extension</a> 420 features a browser action that, 421 when clicked, 422 shows a <em>popup</em>. 423 </td> 424 <td> 425 This <a href="samples.html#mappy">map extension</a> 426 uses a <em>page action</em> 427 (icon in the address bar) 428 and <em>content script</em> 429 (code injected into a web page). 430 </td> 431</tr> 432</tbody></table> 433 434<p> 435Extensions (and packaged apps) can also present a UI in other ways, 436such as adding to the Chrome context menu, 437providing an options page, 438or using a content script that changes how pages look. 439See the <a href="devguide.html">Developer's Guide</a> 440for a complete list of extension features, 441with links to implementation details 442for each one. 443</p> 444 445 446<h3 id="packagedapp-ui">Packaged app UIs</h3> 447 448<p> 449A packaged app usually presents its main functionality using 450an HTML page that's bundled into the app. 451For example, the following packaged app 452displays a Flash file within an HTML page. 453</p> 454 455<img src="images/index/flashapp.png" width="372" height="300" alt="screenshot"> 456 457<p> 458For more information, 459see <a href="apps.html">Packaged Apps</a>. 460</p> 461 462<h2 id="files">Files</h2> 463<p> 464Each extension has the following files: 465<!-- PENDING: This could use a picture --> 466</p> 467 468<ul> 469 <li>A <b>manifest file</b></li> 470 <li>One or more <b>HTML files</b> (unless the extension is a theme)</li> 471 <li><em>Optional:</em> One or more <b>JavaScript files</b></li> 472 <li><em>Optional:</em> Any other files your extension needs—for 473 example, image files</li> 474</ul> 475 476<p> 477While you're working on your extension, 478you put all these files into a single folder. 479When you distribute your extension, 480the contents of the folder are packaged into a special ZIP file 481that has a <code>.crx</code> suffix. 482If you upload your extension using the 483<a href="https://chrome.google.com/webstore/developer/dashboard">Chrome Developer Dashboard</a>, 484the <code>.crx</code> file is created for you. 485For details on distributing extensions, 486see <a href="hosting.html">Hosting</a>. 487</p> 488 489 490<h3 id="relative-urls">Referring to files</h3> 491 492<p> 493You can put any file you like into an extension, 494but how do you use it? 495Usually, 496you can refer to the file using a relative URL, 497just as you would in an ordinary HTML page. 498Here's an example of referring to 499a file named <code>myimage.png</code> 500that's in a subfolder named <code>images</code>. 501</p> 502 503<pre><img <b>src="images/myimage.png"</b>> 504</pre> 505 506<p> 507As you might notice while you use the Google Chrome debugger, 508every file in an extension is also accessible by an absolute URL like this: 509</p> 510 511<blockquote> 512<b>chrome-extension://</b><em><extensionID></em><b>/</b><em><pathToFile></em> 513</blockquote> 514 515<p> 516In that URL, the <em><extensionID></em> is a unique identifier 517that the extension system generates for each extension. 518You can see the IDs for all your loaded extensions 519by going to the URL <b>chrome://extensions</b>. 520The <em><pathToFile></em> is the location of the file 521under the extension's top folder; 522it's the same as the relative URL. 523</p> 524 525<!-- [PENDING: Should mention/reflect/link to <a href="http://dev.chromium.org/developers/design-documents/extensions/i18n">internationalization</a> when it's ready.] --> 526 527 528<a name="H3-5"></a><h3>The manifest file</h3> 529 530<p> 531The manifest file, called <code>manifest.json</code>, 532gives information about the extension, 533such as the most important files 534and the capabilities that the extension might use. 535Here's a typical manifest file for a browser action 536that uses information from google.com: 537</p> 538 539<pre>{ 540 "name": "My Extension", 541 "version": "2.1", 542 "description": "Gets information from Google.", 543 "icons": { "128": "icon_128.png" }, 544 "background_page": "bg.html", 545 "permissions": ["http://*.google.com/", "https://*.google.com/"], 546 "browser_action": { 547 "default_title": "", 548 "default_icon": "icon_19.png", 549 "default_popup": "popup.html" 550 } 551}</pre> 552 553<p> 554For details, see 555<a href="manifest.html">Manifest Files</a>. 556</p> 557 558<h2 id="arch">Architecture</h2> 559 560<p> 561Most extensions have a 562<a href="background_pages.html">background page</a>, 563an invisible page 564that holds the main logic of the extension. 565</p> 566 567<img src="images/arch-1.gif" width="232" height="168" alt="Two windows and a box representing a background page (background.html). One window has a yellow icon; the other has both a yellow icon and a blue icon. The yellow icons are connected to the background page."> 568 569<p> 570The preceding figure shows a browser 571that has at least two extensions installed: 572a browser action (yellow icon) 573and a page action (blue icon). 574The browser action's background page, 575which is defined by an HTML file 576(<code>background.html</code>), 577has JavaScript code that controls 578the behavior of the browser action in both windows. 579</p> 580 581 582<h3 id="pages">Pages</h3> 583 584<p> 585The background page isn't the only HTML page 586that an extension can have. 587For example, a browser action can have a popup, 588which is implemented by an HTML file. 589Extensions can also 590use <a href="tabs.html#Method-create"><code>chrome.tabs.create()</code></a> 591or <code>window.open()</code> 592to display HTML files that are in the extension. 593</p> 594 595<p> 596The HTML pages inside an extension 597have complete access to each other's DOMs, 598and they can invoke functions on each other. 599</p> 600 601<p> 602The following figure shows the architecture 603of a browser action's popup. 604The popup's contents are a web page 605defined by an HTML file 606(<code>popup.html</code>). 607The popup doesn't need to duplicate code 608that's in the background page 609(<code>background.html</code>) 610because the popup can invoke functions on the background page. 611</p> 612 613<img src="images/arch-2.gif" width="256" height="168" alt="A browser window containing a browser action that's displaying a popup. The popup's HTML file (popup.html) can communicate with the extension's background page (background.html)."> 614 615<p> 616See the <a href="browserAction.html">Browser Actions</a> page and 617the <a href="#pageComm">Communication between pages</a> section 618for more details. 619</p> 620 621 622<h3 id="contentScripts">Content scripts</h3> 623 624<p> 625If your extension needs to interact with web pages, 626then it needs a <em>content script</em>. 627A content script is some JavaScript 628that executes in the context of a page 629that's been loaded into the browser. 630Think of a content script as part of that loaded page, 631not as part of the extension it was packaged with 632(its <em>parent extension</em>). 633</p> 634 635<!-- [PENDING: Consider explaining that the reason content scripts are separated from the extension is due to chrome's multiprocess design. Something like: 636 637Each extension runs in its own process. 638To have rich interaction with a web page, however, 639the extension must be able to 640run some code in the web page's process. 641Extensions accomplish this with content scripts.] 642--> 643 644<p> 645Content scripts can read details of the web pages the browser visits, 646and they can make changes to the pages. 647In the following figure, 648the content script 649can read and modify 650the DOM for the displayed web page. 651It cannot, however, modify the DOM of its parent extension's background page. 652</p> 653 654<img src="images/arch-3.gif" width="238" height="169" alt="A browser window with a browser action (controlled by background.html) and a content script (controlled by contentscript.js)."> 655 656<p> 657Content scripts aren't completely cut off from their parent extensions. 658A content script can exchange messages with its parent extension, 659as the arrows in the following figure show. 660For example, a content script might send a message 661whenever it finds an RSS feed in a browser page. 662Or a background page might send a message 663asking a content script to change the appearance of its browser page. 664</p> 665 666<img src="images/arch-cs.gif" width="238" height="194" alt="Like the previous figure, but showing more of the parent extension's files, as well as a communication path between the content script and the parent extension."> 667 668<!-- [PENDING: Add overview of message passing.] --> 669 670<p> 671For more information, 672see <a href="content_scripts.html">Content Scripts</a>. 673</p> 674 675 676<h2 id="pageComm">Communication between pages </h2> 677 678<p> 679The HTML pages within an extension often need to communicate. 680<!-- [PENDING: For example, ...] --> 681Because all of an extension's pages 682execute in same process on the same thread, 683the pages can make direct function calls to each other. 684</p> 685 686<p> 687To find pages in the extension, use 688<a href="extension.html"><code>chrome.extension</code></a> 689methods such as 690<code>getViews()</code> and 691<code>getBackgroundPage()</code>. 692Once a page has a reference to other pages within the extension, 693the first page can invoke functions on the other pages, 694and it can manipulate their DOMs. 695</p> 696 697<!-- [PENDING: Here's an example of communication between xyz and the background page. (code example goes here)] --> 698 699 700<h2 id="incognito"> Saving data and incognito mode </h2> 701 702<p> 703Extensions can save data using 704the HTML5 <a href="http://dev.w3.org/html5/webstorage/">web storage API</a> 705(such as <code>localStorage</code>) 706or by making server requests that result in saving data. 707Whenever you want to save something, 708first consider whether it's 709from a window that's in incognito mode. 710By default, extensions don't run in incognito windows, 711and packaged apps <em>do</em>. 712You need to consider what a user expects 713from your extension or packaged app 714when the browser is incognito. 715</p> 716 717<p> 718<em>Incognito mode</em> promises that the window will leave no tracks. 719When dealing with data from incognito windows, 720do your best to honor this promise. 721For example, if your extension normally 722saves browsing history to the cloud, 723don't save history from incognito windows. 724On the other hand, you can store 725your extension's settings from any window, 726incognito or not. 727</p> 728 729<p class="note"> 730<b>Rule of thumb:</b> 731If a piece of data might show where a user 732has been on the web or what the user has done, 733don't store it if it's from an incognito window. 734</p> 735 736<p> 737To detect whether a window is in incognito mode, 738check the <code>incognito</code> property of the relevant 739<a href="tabs.html#type-Tab">Tab</a> or 740<a href="windows.html#type-Window">Window</a> object. 741For example: 742</p> 743 744<pre>var bgPage = chrome.extension.getBackgroundPage(); 745 746function saveTabData(tab, data) { 747 if (tab.incognito) { 748 bgPage[tab.url] = data; // Persist data ONLY in memory 749 } else { 750 localStorage[tab.url] = data; // OK to store data 751} 752</pre> 753 754 755<h2 id="now-what"> Now what? </h2> 756 757<p> 758Now that you've been introduced to extensions, 759you should be ready to write your own. 760Here are some ideas for where to go next: 761</p> 762 763<ul> 764 <li> <a href="getstarted.html">Tutorial: Getting Started</a> </li> 765 <li> <a href="tut_debugging.html">Tutorial: Debugging</a> </li> 766 <li> <a href="devguide.html">Developer's Guide</a> </li> 767 <li> <a href="http://dev.chromium.org/developers/design-documents/extensions/samples">Samples</a> </li> 768 <li> <a href="http://www.youtube.com/view_play_list?p=CA101D6A85FE9D4B">Videos</a>, 769 such as 770 <a href="http://www.youtube.com/watch?v=B4M_a7xejYI&feature=PlayList&p=CA101D6A85FE9D4B&index=6">Extension Message Passing</a> 771 </li> 772</ul> 773</div> 774 775 <!-- API PAGE --> 776 <div class="apiPage" style="display: none; "> 777 <a name="apiReference"></a> 778 <h2>API reference: chrome.apiname </h2> 779 780 <!-- PROPERTIES --> 781 <div class="apiGroup"> 782 <a name="properties"></a> 783 <h3 id="properties">Properties</h3> 784 785 <div> 786 <a></a> 787 <h4>getLastError</h4> 788 <div class="summary"> 789 <!-- Note: intentionally longer 80 columns --> 790 <span>chrome.extension</span><span>lastError</span> 791 </div> 792 <div> 793 </div> 794 </div> 795 796 </div> <!-- /apiGroup --> 797 798 <!-- METHODS --> 799 <div class="apiGroup" id="methods"> 800 <a name="methods"></a> 801 <h3>Methods</h3> 802 803 <!-- iterates over all functions --> 804 <div class="apiItem"> 805 <a></a> <!-- method-anchor --> 806 <h4>method name</h4> 807 808 <div class="summary"><span>void</span> 809 <!-- Note: intentionally longer 80 columns --> 810 <span>chrome.module.methodName</span>(<span><span>, </span><span></span> 811 <var><span></span></var></span>)</div> 812 813 <div class="description"> 814 <p class="todo">Undocumented.</p> 815 <p> 816 A description from the json schema def of the function goes here. 817 </p> 818 819 <!-- PARAMETERS --> 820 <h4>Parameters</h4> 821 <dl> 822 <div> 823 <div> 824 </div> 825 </div> 826 </dl> 827 828 <!-- RETURNS --> 829 <h4>Returns</h4> 830 <dl> 831 <div> 832 <div> 833 </div> 834 </div> 835 </dl> 836 837 <!-- CALLBACK --> 838 <div> 839 <div> 840 <h4>Callback function</h4> 841 <p> 842 The callback <em>parameter</em> should specify a function 843 that looks like this: 844 </p> 845 <p> 846 If you specify the <em>callback</em> parameter, it should 847 specify a function that looks like this: 848 </p> 849 850 <!-- Note: intentionally longer 80 columns --> 851 <pre>function(<span>Type param1, Type param2</span>) <span class="subdued">{...}</span>;</pre> 852 <dl> 853 <div> 854 <div> 855 </div> 856 </div> 857 </dl> 858 </div> 859 </div> 860 861 <!-- MIN_VERSION --> 862 <p> 863 This function was added in version <b><span></span></b>. 864 If you require this function, the manifest key 865 <a href="manifest.html#minimum_chrome_version">minimum_chrome_version</a> 866 can ensure that your extension won't be run in an earlier browser version. 867 </p> 868 </div> <!-- /description --> 869 870 </div> <!-- /apiItem --> 871 872 </div> <!-- /apiGroup --> 873 874 <!-- EVENTS --> 875 <div class="apiGroup"> 876 <a name="events"></a> 877 <h3 id="events">Events</h3> 878 879 <!-- iterates over all events --> 880 <div class="apiItem"> 881 <a></a> 882 <h4>event name</h4> 883 884 <div class="summary"> 885 <!-- Note: intentionally longer 80 columns --> 886 <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>); 887 </div> 888 889 <div class="description"> 890 <p class="todo">Undocumented.</p> 891 <p> 892 A description from the json schema def of the event goes here. 893 </p> 894 895 <!-- PARAMETERS --> 896 <h4>Parameters</h4> 897 <dl> 898 <div> 899 <div> 900 </div> 901 </div> 902 </dl> 903 904 </div> <!-- /decription --> 905 906 </div> <!-- /apiItem --> 907 908 </div> <!-- /apiGroup --> 909 910 <!-- TYPES --> 911 <div class="apiGroup"> 912 <a name="types"></a> 913 <h3 id="types">Types</h3> 914 915 <!-- iterates over all types --> 916 <div class="apiItem"> 917 <a></a> 918 <h4>type name</h4> 919 920 <div> 921 </div> 922 923 </div> <!-- /apiItem --> 924 925 </div> <!-- /apiGroup --> 926 927 </div> <!-- /apiPage --> 928 </div> <!-- /gc-pagecontent --> 929 </div> <!-- /g-section --> 930 </div> <!-- /codesiteContent --> 931 <div id="gc-footer" --=""> 932 <div class="text"> 933 <p> 934 Except as otherwise <a href="http://code.google.com/policies.html#restrictions">noted</a>, 935 the content of this page is licensed under the <a rel="license" href="http://creativecommons.org/licenses/by/3.0/">Creative Commons 936 Attribution 3.0 License</a>, and code samples are licensed under the 937 <a rel="license" href="http://code.google.com/google_bsd_license.html">BSD License</a>. 938 </p> 939 <p> 940 ©2010 Google 941 </p> 942 943<!-- begin analytics --> 944<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script> 945<script src="http://www.google-analytics.com/ga.js" type="text/javascript"></script> 946 947<script type="text/javascript"> 948 // chrome doc tracking 949 try { 950 var engdocs = _gat._getTracker("YT-10763712-2"); 951 engdocs._trackPageview(); 952 } catch(err) {} 953 954 // code.google.com site-wide tracking 955 try { 956 _uacct="UA-18071-1"; 957 _uanchor=1; 958 _uff=0; 959 urchinTracker(); 960 } 961 catch(e) {/* urchinTracker not available. */} 962</script> 963<!-- end analytics --> 964 </div> 965 </div> <!-- /gc-footer --> 966 </div> <!-- /gc-container --> 967</body></html> 968
