| 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="../../../../third_party/json_minify/mini
fy-sans-regexp.js"> | |
| 17 </script> | |
| 18 <script type="text/javascript" src="js/api_page_generator.js"></script> | |
| 19 <script type="text/javascript" src="js/bootstrap.js"></script> | |
| 20 <script type="text/javascript" src="js/sidebar.js"></script> | |
| 21 <title>Overview - Google Chrome Extensions - Google Code</title></head> | |
| 22 <body> <div id="devModeWarning" class="displayModeWarning"> | |
| 23 You are viewing extension docs in chrome via the 'file:' scheme: are you exp
ecting to see local changes when you refresh? You'll need run chrome with --allo
w-file-access-from-files. | |
| 24 </div> | |
| 25 <div id="branchWarning" class="displayModeWarning"> | |
| 26 <span>WARNING: This is the <span id="branchName">BETA</span> documentation. | |
| 27 It may not work with the stable release of Chrome.</span> | |
| 28 <select id="branchChooser"> | |
| 29 <option>Choose a different version... | |
| 30 </option><option value="">Stable | |
| 31 </option><option value="beta">Beta | |
| 32 </option><option value="dev">Dev | |
| 33 </option><option value="trunk">Trunk | |
| 34 </option></select> | |
| 35 </div> | |
| 36 <div id="unofficialWarning" class="displayModeWarning"> | |
| 37 <span>WARNING: This is unofficial documentation. It may not work with the | |
| 38 current release of Chrome.</span> | |
| 39 <button id="goToOfficialDocs">Go to the official docs</button> | |
| 40 </div> | |
| 41 <div id="gc-container" class="labs"> | |
| 42 <!-- SUBTEMPLATES: DO NOT MOVE FROM THIS LOCATION --> | |
| 43 <!-- In particular, sub-templates that recurse, must be used by allowing | |
| 44 jstemplate to make a copy of the template in this section which | |
| 45 are not operated on by way of the jsskip="true" --> | |
| 46 <!-- /SUBTEMPLATES --> | |
| 47 <a id="top"></a> | |
| 48 <div id="skipto"> | |
| 49 <a href="#gc-pagecontent">Skip to page content</a> | |
| 50 <a href="#gc-toc">Skip to main navigation</a> | |
| 51 </div> | |
| 52 <!-- API HEADER --> | |
| 53 <table id="header" width="100%" cellspacing="0" border="0"> | |
| 54 <tbody><tr> | |
| 55 <td valign="middle"><a href="http://code.google.com/"><img src="images/c
ode_labs_logo.gif" height="43" width="161" alt="Google Code Labs" style="border:
0; margin:0;"></a></td> | |
| 56 <td valign="middle" width="100%" style="padding-left:0.6em;"> | |
| 57 <form action="http://www.google.com/cse" id="cse" style="margin-top:0.
5em"> | |
| 58 <div id="gsc-search-box"> | |
| 59 <input type="hidden" name="cx" value="002967670403910741006:61_cvz
fqtno"> | |
| 60 <input type="hidden" name="ie" value="UTF-8"> | |
| 61 <input type="text" name="q" value="" size="55"> | |
| 62 <input class="gsc-search-button" type="submit" name="sa" value="Se
arch"> | |
| 63 <br> | |
| 64 <span class="greytext">e.g. "page action" or "tabs"</span> | |
| 65 </div> | |
| 66 </form> | |
| 67 <script type="text/javascript" src="https://www.google.com/jsapi"></sc
ript> | |
| 68 <script type="text/javascript">google.load("elements", "1", {packages:
"transliteration"});</script> | |
| 69 <script type="text/javascript" src="https://www.google.com/coop/cse/t1
3n?form=cse&t13n_langs=en"></script> | |
| 70 <script type="text/javascript" src="https://www.google.com/coop/cse/br
and?form=cse&lang=en"></script> | |
| 71 </td> | |
| 72 </tr> | |
| 73 </tbody></table> | |
| 74 <div id="codesiteContent" class=""> | |
| 75 <a id="gc-topnav-anchor"></a> | |
| 76 <div id="gc-topnav"> | |
| 77 <h1>Google Chrome Extensions (<a href="http://code.google.com/labs/">Lab
s</a>)</h1> | |
| 78 <ul id="home" class="gc-topnav-tabs"> | |
| 79 <li id="home_link"> | |
| 80 <a href="index.html" title="Google Chrome Extensions home page">Home
</a> | |
| 81 </li> | |
| 82 <li id="docs_link"> | |
| 83 <a href="docs.html" title="Official Google Chrome Extensions documen
tation">Docs</a> | |
| 84 </li> | |
| 85 <li id="faq_link"> | |
| 86 <a href="faq.html" title="Answers to frequently asked questions abou
t Google Chrome Extensions">FAQ</a> | |
| 87 </li> | |
| 88 <li id="samples_link"> | |
| 89 <a href="samples.html" title="Sample extensions (with source code)">
Samples</a> | |
| 90 </li> | |
| 91 <li id="group_link"> | |
| 92 <a href="http://groups.google.com/a/chromium.org/group/chromium-exte
nsions" title="Google Chrome Extensions developer forum">Group</a> | |
| 93 </li> | |
| 94 <li id="so_link"> | |
| 95 <a href="http://stackoverflow.com/questions/tagged/google-chrome-ext
ension" title="[google-chrome-extension] tag on Stack Overflow">Questions?</a> | |
| 96 </li> | |
| 97 </ul> | |
| 98 </div> <!-- end gc-topnav --> | |
| 99 <div class="g-section g-tpl-170"> | |
| 100 <!-- SIDENAV --> | |
| 101 <div class="g-unit g-first" id="gc-toc"> | |
| 102 <ul> | |
| 103 <li><a href="getstarted.html">Getting Started</a></li> | |
| 104 <li class="leftNavSelected">Overview</li> | |
| 105 <li><a href="whats_new.html">What's New?</a></li> | |
| 106 <li><h2><a href="devguide.html">Developer's Guide</a></h2> | |
| 107 <ul> | |
| 108 <li>Browser UI | |
| 109 <ul> | |
| 110 <li><a href="browserAction.html">Browser Actions</a></li> | |
| 111 <li><a href="contextMenus.html">Context Menus</a></li> | |
| 112 <li><a href="notifications.html">Desktop Notifications</a></li
> | |
| 113 <li><a href="omnibox.html">Omnibox</a></li> | |
| 114 <li><a href="options.html">Options Pages</a></li> | |
| 115 <li><a href="override.html">Override Pages</a></li> | |
| 116 <li><a href="pageAction.html">Page Actions</a></li> | |
| 117 </ul> | |
| 118 </li> | |
| 119 <li>Browser Interaction | |
| 120 <ul> | |
| 121 <li><a href="bookmarks.html">Bookmarks</a></li> | |
| 122 <li><a href="cookies.html">Cookies</a></li> | |
| 123 <li><a href="devtools.html">Developer Tools</a></li> | |
| 124 <li><a href="events.html">Events</a></li> | |
| 125 <li><a href="history.html">History</a></li> | |
| 126 <li><a href="management.html">Management</a></li> | |
| 127 <li><a href="tabs.html">Tabs</a></li> | |
| 128 <li><a href="windows.html">Windows</a></li> | |
| 129 </ul> | |
| 130 </li> | |
| 131 <li>Implementation | |
| 132 <ul> | |
| 133 <li><a href="a11y.html">Accessibility</a></li> | |
| 134 <li><a href="background_pages.html">Background Pages</a></li> | |
| 135 <li><a href="content_scripts.html">Content Scripts</a></li> | |
| 136 <li><a href="xhr.html">Cross-Origin XHR</a></li> | |
| 137 <li><a href="i18n.html">Internationalization</a></li> | |
| 138 <li><a href="messaging.html">Message Passing</a></li> | |
| 139 <li><a href="permissions.html">Optional Permissions</a></li> | |
| 140 <li><a href="npapi.html">NPAPI Plugins</a></li> | |
| 141 </ul> | |
| 142 </li> | |
| 143 <li>Finishing | |
| 144 <ul> | |
| 145 <li><a href="hosting.html">Hosting</a></li> | |
| 146 <li><a href="external_extensions.html">Other Deployment Option
s</a></li> | |
| 147 </ul> | |
| 148 </li> | |
| 149 </ul> | |
| 150 </li> | |
| 151 <li><h2><a href="apps.html">Packaged Apps</a></h2></li> | |
| 152 <li><h2><a href="tutorials.html">Tutorials</a></h2> | |
| 153 <ul> | |
| 154 <li><a href="tut_debugging.html">Debugging</a></li> | |
| 155 <li><a href="tut_analytics.html">Google Analytics</a></li> | |
| 156 <li><a href="tut_oauth.html">OAuth</a></li> | |
| 157 </ul> | |
| 158 </li> | |
| 159 <li><h2>Reference</h2> | |
| 160 <ul> | |
| 161 <li>Formats | |
| 162 <ul> | |
| 163 <li><a href="manifest.html">Manifest Files</a></li> | |
| 164 <li><a href="match_patterns.html">Match Patterns</a></li> | |
| 165 </ul> | |
| 166 </li> | |
| 167 <li><a href="permission_warnings.html">Permission Warnings</a></li
> | |
| 168 <li><a href="api_index.html">chrome.* APIs</a></li> | |
| 169 <li><a href="api_other.html">Other APIs</a></li> | |
| 170 </ul> | |
| 171 </li> | |
| 172 <li><h2><a href="samples.html">Samples</a></h2></li> | |
| 173 <div class="line"> </div> | |
| 174 <li><h2>More</h2> | |
| 175 <ul> | |
| 176 <li><a href="http://code.google.com/chrome/webstore/docs/index.htm
l">Chrome Web Store</a></li> | |
| 177 <li><a href="http://code.google.com/chrome/apps/docs/developers_gu
ide.html">Hosted Apps</a></li> | |
| 178 <li><a href="themes.html">Themes</a></li> | |
| 179 </ul> | |
| 180 </li> | |
| 181 </ul> | |
| 182 </div> | |
| 183 <script> | |
| 184 initToggles(); | |
| 185 </script> | |
| 186 <div class="g-unit" id="gc-pagecontent"> | |
| 187 <div id="pageTitle"> | |
| 188 <h1 class="page_title">Overview</h1> | |
| 189 </div> | |
| 190 <!-- TABLE OF CONTENTS --> | |
| 191 <div id="toc"> | |
| 192 <h2>Contents</h2> | |
| 193 <ol> | |
| 194 <li> | |
| 195 <a href="#what">The basics</a> | |
| 196 <ol> | |
| 197 <li> | |
| 198 <a href="#extension-ui">Extension UIs</a> | |
| 199 </li><li> | |
| 200 <a href="#packagedapp-ui">Packaged app UIs</a> | |
| 201 </li> | |
| 202 </ol> | |
| 203 </li><li> | |
| 204 <a href="#files">Files</a> | |
| 205 <ol> | |
| 206 <li> | |
| 207 <a href="#relative-urls">Referring to files</a> | |
| 208 </li><li> | |
| 209 <a href="#H3-5">The manifest file</a> | |
| 210 </li> | |
| 211 </ol> | |
| 212 </li><li> | |
| 213 <a href="#arch">Architecture</a> | |
| 214 <ol> | |
| 215 <li> | |
| 216 <a href="#background_page">The background page</a> | |
| 217 </li><li> | |
| 218 <a href="#pages">UI pages</a> | |
| 219 </li><li> | |
| 220 <a href="#contentScripts">Content scripts</a> | |
| 221 </li> | |
| 222 </ol> | |
| 223 </li><li> | |
| 224 <a href="#apis"> Using the chrome.* APIs </a> | |
| 225 <ol> | |
| 226 <li> | |
| 227 <a href="#sync"> Asynchronous vs. synchronous methods </a> | |
| 228 </li><li> | |
| 229 <a href="#sync-example"> Example: Using a callback </a> | |
| 230 </li><li> | |
| 231 <a href="#chrome-more"> More details </a> | |
| 232 </li> | |
| 233 </ol> | |
| 234 </li><li> | |
| 235 <a href="#pageComm">Communication between pages </a> | |
| 236 <ol> | |
| 237 </ol> | |
| 238 </li><li> | |
| 239 <a href="#incognito"> Saving data and incognito mode </a> | |
| 240 <ol> | |
| 241 </ol> | |
| 242 </li><li> | |
| 243 <a href="#now-what"> Now what? </a> | |
| 244 <ol> | |
| 245 </ol> | |
| 246 </li> | |
| 247 </ol> | |
| 248 </div> | |
| 249 <!-- /TABLE OF CONTENTS --> | |
| 250 <!-- Standard content lead-in for experimental API pages --> | |
| 251 <!-- STATIC CONTENT PLACEHOLDER --> | |
| 252 <div id="static"><div id="pageData-name" class="pageData">Overview</div> | |
| 253 <div id="pageData-showTOC" class="pageData">true</div> | |
| 254 <p> | |
| 255 Once you've finished this page | |
| 256 and the | |
| 257 <a href="getstarted.html">Getting Started</a> tutorial, | |
| 258 you'll be all set to start writing extensions and packaged apps. | |
| 259 </p> | |
| 260 <p class="caution"> | |
| 261 <strong>Note:</strong> | |
| 262 <em>Packaged apps</em> are implemented as extensions, | |
| 263 so unless otherwise stated, | |
| 264 everything in this page applies to packaged apps. | |
| 265 </p> | |
| 266 <h2 id="what">The basics</h2> | |
| 267 <p> | |
| 268 An extension is a zipped bundle of files—HTML, | |
| 269 CSS, JavaScript, images, and anything else you need—that | |
| 270 adds functionality to the Google Chrome browser. | |
| 271 Extensions are essentially web pages, | |
| 272 and they can use all the | |
| 273 <a href="api_other.html">APIs that the browser provides to web pages</a>, | |
| 274 from XMLHttpRequest to JSON to HTML5. | |
| 275 </p> | |
| 276 <p> | |
| 277 Extensions can interact with web pages or servers using | |
| 278 <a href="content_scripts.html">content scripts</a> or | |
| 279 <a href="xhr.html">cross-origin XMLHttpRequests</a>. | |
| 280 Extensions can also interact programmatically | |
| 281 with browser features such as | |
| 282 <a href="bookmarks.html">bookmarks</a> | |
| 283 and <a href="tabs.html">tabs</a>. | |
| 284 </p> | |
| 285 <h3 id="extension-ui">Extension UIs</h3> | |
| 286 <p> | |
| 287 Many extensions—but not packaged apps—add | |
| 288 UI to Google Chrome in the form of | |
| 289 <a href="browserAction.html">browser actions</a> | |
| 290 or <a href="pageAction.html">page actions</a>. | |
| 291 Each extension can have at most one browser action or page action. | |
| 292 Choose a <b>browser action</b> when the extension is relevant to most pages. | |
| 293 Choose a <b>page action</b> when the extension's icon | |
| 294 should appear or disappear, | |
| 295 depending on the page. | |
| 296 </p> | |
| 297 <table class="columns"> | |
| 298 <tbody><tr> | |
| 299 <td width="33%"> | |
| 300 <img src="images/overview/browser-action.png" width="147" height="100" alt="
screenshot"> | |
| 301 </td> | |
| 302 <td width="33%"> | |
| 303 <img src="images/overview/page-action.png" width="147" height="100" alt="scr
eenshot"> | |
| 304 </td> | |
| 305 <td> | |
| 306 <img src="images/overview/browser-action-with-popup.png" width="147" height=
"100" alt="screenshot"> | |
| 307 </td> | |
| 308 </tr> | |
| 309 <tr> | |
| 310 <td> | |
| 311 This <a href="samples.html#gmail">mail extension</a> | |
| 312 uses a <em>browser action</em> | |
| 313 (icon in the toolbar). | |
| 314 </td> | |
| 315 <td> | |
| 316 This <a href="samples.html#mappy">map extension</a> | |
| 317 uses a <em>page action</em> | |
| 318 (icon in the address bar) | |
| 319 and <em>content script</em> | |
| 320 (code injected into a web page). | |
| 321 </td> | |
| 322 <td> | |
| 323 This <a href="samples.html#news">news extension</a> | |
| 324 features a browser action that, | |
| 325 when clicked, | |
| 326 shows a <em>popup</em>. | |
| 327 </td> | |
| 328 </tr> | |
| 329 </tbody></table> | |
| 330 <p> | |
| 331 Extensions (and packaged apps) can also present a UI in other ways, | |
| 332 such as adding to the Chrome context menu, | |
| 333 providing an options page, | |
| 334 or using a content script that changes how pages look. | |
| 335 See the <a href="devguide.html">Developer's Guide</a> | |
| 336 for a complete list of extension features, | |
| 337 with links to implementation details | |
| 338 for each one. | |
| 339 </p> | |
| 340 <h3 id="packagedapp-ui">Packaged app UIs</h3> | |
| 341 <p> | |
| 342 A packaged app usually presents its main functionality using | |
| 343 an HTML page that's bundled into the app. | |
| 344 For example, the following packaged app | |
| 345 displays a Flash file within an HTML page. | |
| 346 </p> | |
| 347 <img src="images/overview/flash-app.png" width="372" height="300" alt="screensho
t"> | |
| 348 <p> | |
| 349 For more information, | |
| 350 see <a href="apps.html">Packaged Apps</a>. | |
| 351 </p> | |
| 352 <h2 id="files">Files</h2> | |
| 353 <p> | |
| 354 Each extension has the following files: | |
| 355 <!-- PENDING: This could use a picture --> | |
| 356 </p> | |
| 357 <ul> | |
| 358 <li>A <b>manifest file</b></li> | |
| 359 <li>One or more <b>HTML files</b> (unless the extension is a theme)</li> | |
| 360 <li><em>Optional:</em> One or more <b>JavaScript files</b></li> | |
| 361 <li><em>Optional:</em> Any other files your extension needs—for | |
| 362 example, image files</li> | |
| 363 </ul> | |
| 364 <p> | |
| 365 While you're working on your extension, | |
| 366 you put all these files into a single folder. | |
| 367 When you distribute your extension, | |
| 368 the contents of the folder are packaged into a special ZIP file | |
| 369 that has a <code>.crx</code> suffix. | |
| 370 If you upload your extension using the | |
| 371 <a href="https://chrome.google.com/webstore/developer/dashboard">Chrome Develope
r Dashboard</a>, | |
| 372 the <code>.crx</code> file is created for you. | |
| 373 For details on distributing extensions, | |
| 374 see <a href="hosting.html">Hosting</a>. | |
| 375 </p> | |
| 376 <h3 id="relative-urls">Referring to files</h3> | |
| 377 <p> | |
| 378 You can put any file you like into an extension, | |
| 379 but how do you use it? | |
| 380 Usually, | |
| 381 you can refer to the file using a relative URL, | |
| 382 just as you would in an ordinary HTML page. | |
| 383 Here's an example of referring to | |
| 384 a file named <code>myimage.png</code> | |
| 385 that's in a subfolder named <code>images</code>. | |
| 386 </p> | |
| 387 <pre><img <b>src="images/myimage.png"</b>> | |
| 388 </pre> | |
| 389 <p> | |
| 390 As you might notice while you use the Google Chrome debugger, | |
| 391 every file in an extension is also accessible by an absolute URL like this: | |
| 392 </p> | |
| 393 <blockquote> | |
| 394 <b>chrome-extension://</b><em><extensionID></em><b>/</b><em><pathToFile
></em> | |
| 395 </blockquote> | |
| 396 <p> | |
| 397 In that URL, the <em><extensionID></em> is a unique identifier | |
| 398 that the extension system generates for each extension. | |
| 399 You can see the IDs for all your loaded extensions | |
| 400 by going to the URL <b>chrome://extensions</b>. | |
| 401 The <em><pathToFile></em> is the location of the file | |
| 402 under the extension's top folder; | |
| 403 it's the same as the relative URL. | |
| 404 </p> | |
| 405 <p> | |
| 406 While you're working on an extension | |
| 407 (before it's packaged), | |
| 408 the extension ID can change. | |
| 409 Specifically, the ID of an unpacked extension will change | |
| 410 if you load the extension from a different directory; | |
| 411 the ID will change again when you package the extension. | |
| 412 If your extension's code | |
| 413 needs to specify the full path to a file within the extension, | |
| 414 you can use the <code>@@extension_id</code> | |
| 415 <a href="i18n.html#overview-predefined">predefined message</a> | |
| 416 to avoid hardcoding the ID during development. | |
| 417 </p> | |
| 418 <p> | |
| 419 When you package an extension | |
| 420 (typically, by uploading it with the dashboard), | |
| 421 the extension gets a permanent ID, | |
| 422 which remains the same even after you update the extension. | |
| 423 Once the extension ID is permanent, | |
| 424 you can change all occurrences of | |
| 425 <code>@@extension_id</code> to use the real ID. | |
| 426 </p> | |
| 427 <a name="H3-5"></a><h3>The manifest file</h3> | |
| 428 <p> | |
| 429 The manifest file, called <code>manifest.json</code>, | |
| 430 gives information about the extension, | |
| 431 such as the most important files | |
| 432 and the capabilities that the extension might use. | |
| 433 Here's a typical manifest file for a browser action | |
| 434 that uses information from google.com: | |
| 435 </p> | |
| 436 <pre>{ | |
| 437 "name": "My Extension", | |
| 438 "version": "2.1", | |
| 439 "description": "Gets information from Google.", | |
| 440 "icons": { "128": "icon_128.png" }, | |
| 441 "background": { | |
| 442 "scripts": ["bg.js"] | |
| 443 }, | |
| 444 "permissions": ["http://*.google.com/", "https://*.google.com/"], | |
| 445 "browser_action": { | |
| 446 "default_title": "", | |
| 447 "default_icon": "icon_19.png", | |
| 448 "default_popup": "popup.html" | |
| 449 } | |
| 450 }</pre> | |
| 451 <p> | |
| 452 For details, see | |
| 453 <a href="manifest.html">Manifest Files</a>. | |
| 454 </p> | |
| 455 <h2 id="arch">Architecture</h2> | |
| 456 <p> | |
| 457 Many extensions have a <em>background page</em>, | |
| 458 an invisible page | |
| 459 that holds the main logic of the extension. | |
| 460 An extension can also contain other pages | |
| 461 that present the extension's UI. | |
| 462 If an extension needs to interact with web pages that the user loads | |
| 463 (as opposed to pages that are included in the extension), | |
| 464 then the extension must use a content script. | |
| 465 </p> | |
| 466 <h3 id="background_page">The background page</h3> | |
| 467 <p> | |
| 468 The following figure shows a browser | |
| 469 that has at least two extensions installed: | |
| 470 a browser action (yellow icon) | |
| 471 and a page action (blue icon). | |
| 472 Both the browser action and the page action | |
| 473 have background pages. | |
| 474 This figure shows the browser action's background page, | |
| 475 which is defined by <code>background.html</code> | |
| 476 and has JavaScript code that controls | |
| 477 the behavior of the browser action in both windows. | |
| 478 </p> | |
| 479 <img src="images/overview/arch-1.gif" width="232" height="168" alt="Two windows
and a box representing a background page (background.html). One window has a yel
low icon; the other has both a yellow icon and a blue icon. The yellow icons are
connected to the background page."> | |
| 480 <p> | |
| 481 Although background pages can be useful, | |
| 482 don't use one if you don't need it. | |
| 483 Background pages are always open, | |
| 484 so when a user installs many extensions that have background pages, | |
| 485 Chrome's performance can suffer. | |
| 486 </p> | |
| 487 <!-- PENDING: Perhaps show a picture of many background page processes. | |
| 488 This could build on a figure that shows the process architecture, | |
| 489 and perhaps the differences between packaged apps and extensions. --> | |
| 490 <p> | |
| 491 Here are some examples of extensions that usually | |
| 492 <em>do not need</em> a background page: | |
| 493 </p> | |
| 494 <ul> | |
| 495 <li> An extension with a browser action that | |
| 496 presents its UI solely through a popup | |
| 497 (and perhaps an options page). | |
| 498 </li> | |
| 499 <li> | |
| 500 An extension that provides an <em>override page</em>—a | |
| 501 page that replaces a standard Chrome page. | |
| 502 </li> | |
| 503 <li> | |
| 504 An extension with a content script | |
| 505 that <em>doesn't use</em> localStorage or | |
| 506 <a href="#apis">extension APIs</a>. | |
| 507 </li> | |
| 508 <li> | |
| 509 An extension that has no UI except for an options page. | |
| 510 </li> | |
| 511 </ul> | |
| 512 <p> | |
| 513 See <a href="background_pages.html">Background Pages</a> | |
| 514 for more details. | |
| 515 </p> | |
| 516 <h3 id="pages">UI pages</h3> | |
| 517 <p> | |
| 518 Extensions can contain ordinary HTML pages that display the extension's UI. | |
| 519 For example, a browser action can have a popup, | |
| 520 which is implemented by an HTML file. | |
| 521 Any extension can have an options page, | |
| 522 which lets users customize how the extension works. | |
| 523 Another type of special page is the override page. | |
| 524 And finally, you can | |
| 525 use <a href="tabs.html#method-create">chrome.tabs.create()</a> | |
| 526 or <code>window.open()</code> | |
| 527 to display any other HTML files that are in the extension. | |
| 528 </p> | |
| 529 <p> | |
| 530 The HTML pages inside an extension | |
| 531 have complete access to each other's DOMs, | |
| 532 and they can invoke functions on each other. | |
| 533 </p> | |
| 534 <!-- PENDING: Change the following example and figure | |
| 535 to use something that's not a popup? | |
| 536 (It might lead people to think that popups need background pages.) --> | |
| 537 <p> | |
| 538 The following figure shows the architecture | |
| 539 of a browser action's popup. | |
| 540 The popup's contents are a web page | |
| 541 defined by an HTML file | |
| 542 (<code>popup.html</code>). | |
| 543 This extension also happens to have a background page | |
| 544 (<code>background.html</code>). | |
| 545 The popup doesn't need to duplicate code | |
| 546 that's in the background page | |
| 547 because the popup can invoke functions on the background page. | |
| 548 </p> | |
| 549 <img src="images/overview/arch-2.gif" width="256" height="168" alt="A browser wi
ndow containing a browser action that's displaying a popup. The popup's HTML fil
e (popup.html) can communicate with the extension's background page (background.
html)."> | |
| 550 <p> | |
| 551 See <a href="browserAction.html">Browser Actions</a>, | |
| 552 <a href="options.html">Options</a>, | |
| 553 <a href="override.html">Override Pages</a>, | |
| 554 and the <a href="#pageComm">Communication between pages</a> section | |
| 555 for more details. | |
| 556 </p> | |
| 557 <h3 id="contentScripts">Content scripts</h3> | |
| 558 <p> | |
| 559 If your extension needs to interact with web pages, | |
| 560 then it needs a <em>content script</em>. | |
| 561 A content script is some JavaScript | |
| 562 that executes in the context of a page | |
| 563 that's been loaded into the browser. | |
| 564 Think of a content script as part of that loaded page, | |
| 565 not as part of the extension it was packaged with | |
| 566 (its <em>parent extension</em>). | |
| 567 </p> | |
| 568 <!-- [PENDING: Consider explaining that the reason content scripts are separated
from the extension is due to chrome's multiprocess design. Something like: | |
| 569 Each extension runs in its own process. | |
| 570 To have rich interaction with a web page, however, | |
| 571 the extension must be able to | |
| 572 run some code in the web page's process. | |
| 573 Extensions accomplish this with content scripts.] | |
| 574 --> | |
| 575 <p> | |
| 576 Content scripts can read details of the web pages the browser visits, | |
| 577 and they can make changes to the pages. | |
| 578 In the following figure, | |
| 579 the content script | |
| 580 can read and modify | |
| 581 the DOM for the displayed web page. | |
| 582 It cannot, however, modify the DOM of its parent extension's background page. | |
| 583 </p> | |
| 584 <img src="images/overview/arch-3.gif" width="238" height="169" alt="A browser wi
ndow with a browser action (controlled by background.html) and a content script
(controlled by contentscript.js)."> | |
| 585 <p> | |
| 586 Content scripts aren't completely cut off from their parent extensions. | |
| 587 A content script can exchange messages with its parent extension, | |
| 588 as the arrows in the following figure show. | |
| 589 For example, a content script might send a message | |
| 590 whenever it finds an RSS feed in a browser page. | |
| 591 Or a background page might send a message | |
| 592 asking a content script to change the appearance of its browser page. | |
| 593 </p> | |
| 594 <img src="images/overview/arch-cs.gif" width="238" height="194" alt="Like the pr
evious figure, but showing more of the parent extension's files, as well as a co
mmunication path between the content script and the parent extension."> | |
| 595 <!-- [PENDING: Add overview of message passing.] --> | |
| 596 <p> | |
| 597 For more information, | |
| 598 see <a href="content_scripts.html">Content Scripts</a>. | |
| 599 </p> | |
| 600 <h2 id="apis"> Using the chrome.* APIs </h2> | |
| 601 <p> | |
| 602 In addition to having access to all the APIs that web pages and apps can use, | |
| 603 extensions can also use Chrome-only APIs | |
| 604 (often called <em>chrome.* APIs</em>) | |
| 605 that allow tight integration with the browser. | |
| 606 For example, any extension or web app can use the | |
| 607 standard <code>window.open()</code> method to open a URL. | |
| 608 But if you want to specify which window that URL should be displayed in, | |
| 609 your extension can use the Chrome-only | |
| 610 <a href="tabs.html#method-create">chrome.tabs.create()</a> | |
| 611 method instead. | |
| 612 </p> | |
| 613 <h3 id="sync"> Asynchronous vs. synchronous methods </h3> | |
| 614 <p> | |
| 615 Most methods in the chrome.* APIs are <b>asynchronous</b>: | |
| 616 they return immediately, without waiting for the operation to finish. | |
| 617 If you need to know the outcome of that operation, | |
| 618 then you pass a callback function into the method. | |
| 619 That callback is executed later (potentially <em>much</em> later), | |
| 620 sometime after the method returns. | |
| 621 Here's an example of the signature for an asynchronous method: | |
| 622 </p> | |
| 623 <p> | |
| 624 <code> | |
| 625 chrome.tabs.create(object <em>createProperties</em>, function <em>callback</em>) | |
| 626 </code> | |
| 627 </p> | |
| 628 <p> | |
| 629 Other chrome.* methods are <b>synchronous</b>. | |
| 630 Synchronous methods never have a callback | |
| 631 because they don't return until they've completed all their work. | |
| 632 Often, synchronous methods have a return type. | |
| 633 Consider the | |
| 634 <a href="extension.html#method-getBackgroundPage">chrome.extensions.getBackgroun
dPage()</a> method: | |
| 635 </p> | |
| 636 <p> | |
| 637 <code> | |
| 638 Window chrome.extension.getBackgroundPage() | |
| 639 </code> | |
| 640 </p> | |
| 641 <p> | |
| 642 This method has no callback and a return type of <code>Window</code> | |
| 643 because it synchronously returns the background page | |
| 644 and performs no other, asynchronous work. | |
| 645 </p> | |
| 646 <h3 id="sync-example"> Example: Using a callback </h3> | |
| 647 <p> | |
| 648 Say you want to navigate | |
| 649 the user's currently selected tab to a new URL. | |
| 650 To do this, you need to get the current tab's ID | |
| 651 (using <a href="tabs.html#method-getSelected">chrome.tabs.getSelected()</a>) | |
| 652 and then make that tab go to the new URL | |
| 653 (using <a href="tabs.html#method-update">chrome.tabs.update()</a>). | |
| 654 </p> | |
| 655 <p> | |
| 656 If <code>getSelected()</code> were synchronous, | |
| 657 you might write code like this: | |
| 658 </p> | |
| 659 <pre> <b>//THIS CODE DOESN'T WORK</b> | |
| 660 <span class="linenumber">1: </span>var tab = chrome.tabs.getSelected(null); <b>/
/WRONG!!!</b> | |
| 661 <span class="linenumber">2: </span>chrome.tabs.update(tab.id, {url:newUrl}); | |
| 662 <span class="linenumber">3: </span>someOtherFunction(); | |
| 663 </pre> | |
| 664 <p> | |
| 665 That approach fails | |
| 666 because <code>getSelected()</code> is asynchronous. | |
| 667 It returns without waiting for its work to complete, | |
| 668 and it doesn't even return a value | |
| 669 (although some asynchronous methods do). | |
| 670 You can tell that <code>getSelected()</code> is asynchronous | |
| 671 by the <em>callback</em> parameter in its signature: | |
| 672 </p><p> | |
| 673 <code> | |
| 674 chrome.tabs.getSelected(integer <em>windowId</em>, function <em>callback</em>) | |
| 675 </code> | |
| 676 </p> | |
| 677 <p> | |
| 678 To fix the preceding code, | |
| 679 you must use that callback parameter. | |
| 680 The following code shows | |
| 681 how to define a callback function | |
| 682 that gets the results from <code>getSelected()</code> | |
| 683 (as a parameter named <code>tab</code>) | |
| 684 and calls <code>update()</code>. | |
| 685 </p> | |
| 686 <pre> <b>//THIS CODE WORKS</b> | |
| 687 <span class="linenumber">1: </span>chrome.tabs.getSelected(null, <b>function(tab
) {</b> | |
| 688 <span class="linenumber">2: </span> chrome.tabs.update(tab.id, {url:newUrl}); | |
| 689 <span class="linenumber">3: </span><b>}</b>); | |
| 690 <span class="linenumber">4: </span>someOtherFunction(); | |
| 691 </pre> | |
| 692 <p> | |
| 693 In this example, the lines are executed in the following order: 1, 4, 2. | |
| 694 The callback function specified to <code>getSelected</code> is called | |
| 695 (and line 2 executed) | |
| 696 only after information about the currently selected tab is available, | |
| 697 which is sometime after <code>getSelected()</code> returns. | |
| 698 Although <code>update()</code> is asynchronous, | |
| 699 this example doesn't use its callback parameter, | |
| 700 since we don't do anything about the results of the update. | |
| 701 </p> | |
| 702 <h3 id="chrome-more"> More details </h3> | |
| 703 <p> | |
| 704 For more information, see the | |
| 705 <a href="api_index.html">chrome.* API docs</a> | |
| 706 and watch this video: | |
| 707 </p> | |
| 708 <p> | |
| 709 <iframe title="YouTube video player" width="640" height="390" src="http://www.yo
utube.com/embed/bmxr75CV36A?rel=0" frameborder="0" allowfullscreen=""></iframe> | |
| 710 </p> | |
| 711 <h2 id="pageComm">Communication between pages </h2> | |
| 712 <p> | |
| 713 The HTML pages within an extension often need to communicate. | |
| 714 <!-- [PENDING: For example, ...] --> | |
| 715 Because all of an extension's pages | |
| 716 execute in same process on the same thread, | |
| 717 the pages can make direct function calls to each other. | |
| 718 </p> | |
| 719 <p> | |
| 720 To find pages in the extension, use | |
| 721 <a href="extension.html"><code>chrome.extension</code></a> | |
| 722 methods such as | |
| 723 <code>getViews()</code> and | |
| 724 <code>getBackgroundPage()</code>. | |
| 725 Once a page has a reference to other pages within the extension, | |
| 726 the first page can invoke functions on the other pages, | |
| 727 and it can manipulate their DOMs. | |
| 728 </p> | |
| 729 <!-- [PENDING: Here's an example of communication between xyz and the background
page. (code example goes here)] --> | |
| 730 <h2 id="incognito"> Saving data and incognito mode </h2> | |
| 731 <p> | |
| 732 Extensions can save data using | |
| 733 the HTML5 <a href="http://dev.w3.org/html5/webstorage/">web storage API</a> | |
| 734 (such as <code>localStorage</code>) | |
| 735 or by making server requests that result in saving data. | |
| 736 Whenever you want to save something, | |
| 737 first consider whether it's | |
| 738 from a window that's in incognito mode. | |
| 739 By default, extensions don't run in incognito windows, | |
| 740 and packaged apps <em>do</em>. | |
| 741 You need to consider what a user expects | |
| 742 from your extension or packaged app | |
| 743 when the browser is incognito. | |
| 744 </p> | |
| 745 <p> | |
| 746 <em>Incognito mode</em> promises that the window will leave no tracks. | |
| 747 When dealing with data from incognito windows, | |
| 748 do your best to honor this promise. | |
| 749 For example, if your extension normally | |
| 750 saves browsing history to the cloud, | |
| 751 don't save history from incognito windows. | |
| 752 On the other hand, you can store | |
| 753 your extension's settings from any window, | |
| 754 incognito or not. | |
| 755 </p> | |
| 756 <p class="note"> | |
| 757 <b>Rule of thumb:</b> | |
| 758 If a piece of data might show where a user | |
| 759 has been on the web or what the user has done, | |
| 760 don't store it if it's from an incognito window. | |
| 761 </p> | |
| 762 <p> | |
| 763 To detect whether a window is in incognito mode, | |
| 764 check the <code>incognito</code> property of the relevant | |
| 765 <a href="tabs.html#type-Tab">Tab</a> or | |
| 766 <a href="windows.html#type-Window">Window</a> object. | |
| 767 For example: | |
| 768 </p> | |
| 769 <pre>var bgPage = chrome.extension.getBackgroundPage(); | |
| 770 function saveTabData(tab, data) { | |
| 771 if (tab.incognito) { | |
| 772 bgPage[tab.url] = data; // Persist data ONLY in memory | |
| 773 } else { | |
| 774 localStorage[tab.url] = data; // OK to store data | |
| 775 } | |
| 776 </pre> | |
| 777 <h2 id="now-what"> Now what? </h2> | |
| 778 <p> | |
| 779 Now that you've been introduced to extensions, | |
| 780 you should be ready to write your own. | |
| 781 Here are some ideas for where to go next: | |
| 782 </p> | |
| 783 <ul> | |
| 784 <li> <a href="getstarted.html">Tutorial: Getting Started</a> </li> | |
| 785 <li> <a href="tut_debugging.html">Tutorial: Debugging</a> </li> | |
| 786 <li> <a href="devguide.html">Developer's Guide</a> </li> | |
| 787 <li> <a href="http://dev.chromium.org/developers/design-documents/extensions/s
amples">Samples</a> </li> | |
| 788 <li> <a href="http://www.youtube.com/view_play_list?p=CA101D6A85FE9D4B">Videos
</a>, | |
| 789 such as | |
| 790 <a href="http://www.youtube.com/watch?v=B4M_a7xejYI&feature=PlayList&
;p=CA101D6A85FE9D4B&index=6">Extension Message Passing</a> | |
| 791 </li> | |
| 792 </ul> | |
| 793 </div> | |
| 794 <!-- API PAGE --> | |
| 795 <!-- /apiPage --> | |
| 796 </div> <!-- /gc-pagecontent --> | |
| 797 </div> <!-- /g-section --> | |
| 798 </div> <!-- /codesiteContent --> | |
| 799 <div id="gc-footer" --=""> | |
| 800 <div class="text"> | |
| 801 <p> | |
| 802 Except as otherwise <a href="http://code.google.com/policies.html#restrictions
">noted</a>, | |
| 803 the content of this page is licensed under the <a rel="license" href="http://c
reativecommons.org/licenses/by/3.0/">Creative Commons | |
| 804 Attribution 3.0 License</a>, and code samples are licensed under the | |
| 805 <a rel="license" href="http://code.google.com/google_bsd_license.html">BSD Lic
ense</a>. | |
| 806 </p> | |
| 807 <p> | |
| 808 ©2011 Google | |
| 809 </p> | |
| 810 <!-- begin analytics --> | |
| 811 <script src="https://www.google-analytics.com/urchin.js" type="text/javascript">
</script> | |
| 812 <script src="https://www.google-analytics.com/ga.js" type="text/javascript"></sc
ript> | |
| 813 <script type="text/javascript"> | |
| 814 // chrome doc tracking | |
| 815 try { | |
| 816 var engdocs = _gat._getTracker("YT-10763712-2"); | |
| 817 engdocs._trackPageview(); | |
| 818 } catch(err) {} | |
| 819 // code.google.com site-wide tracking | |
| 820 try { | |
| 821 _uacct="UA-18071-1"; | |
| 822 _uanchor=1; | |
| 823 _uff=0; | |
| 824 urchinTracker(); | |
| 825 } | |
| 826 catch(e) {/* urchinTracker not available. */} | |
| 827 </script> | |
| 828 <!-- end analytics --> | |
| 829 </div> | |
| 830 </div> <!-- /gc-footer --> | |
| 831 </div> <!-- /gc-container --> | |
| 832 </body></html> | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 10642015:
Basic setup for generating app docs (Closed)
Base URL: svn://svn.chromium.org/chrome/trunk/src