| 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>Tutorials - 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><a href="overview.html">Overview</a></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">Tutorials</h1> |  | 
| 189       </div> |  | 
| 190         <!-- TABLE OF CONTENTS --> |  | 
| 191         <!-- /TABLE OF CONTENTS --> |  | 
| 192         <!-- Standard content lead-in for experimental API pages --> |  | 
| 193         <!-- STATIC CONTENT PLACEHOLDER --> |  | 
| 194         <div id="static"><div id="pageData-name" class="pageData">Tutorials</div
     > |  | 
| 195 <p> |  | 
| 196 Follow these to get started |  | 
| 197 developing Google Chrome Extensions: |  | 
| 198 </p> |  | 
| 199 <ul> |  | 
| 200   <li> <a href="getstarted.html">Getting Started</a> </li> |  | 
| 201   <li> <a href="tut_debugging.html">Debugging</a> </li> |  | 
| 202 </ul> |  | 
| 203 <p> |  | 
| 204 The remaining tutorials cover |  | 
| 205 more specialized topics: |  | 
| 206 </p> |  | 
| 207 <ul> |  | 
| 208   <li> <a href="tut_analytics.html">Google Analytics</a> - |  | 
| 209   Track the usage of your extension. |  | 
| 210   </li> |  | 
| 211   <li> <a href="tut_oauth.html">OAuth</a> - |  | 
| 212   Learn how your extension can use APIs |  | 
| 213   (such as <a href="http://code.google.com/apis/gdata/">Google Data APIs</a>) |  | 
| 214   that support OAuth. |  | 
| 215   This tutorial features an OAuth library |  | 
| 216   that you can reuse in your extension. |  | 
| 217   </li> |  | 
| 218 </ul> |  | 
| 219 </div> |  | 
| 220         <!-- API PAGE --> |  | 
| 221          <!-- /apiPage --> |  | 
| 222       </div> <!-- /gc-pagecontent --> |  | 
| 223     </div> <!-- /g-section --> |  | 
| 224   </div> <!-- /codesiteContent --> |  | 
| 225     <div id="gc-footer" --=""> |  | 
| 226       <div class="text"> |  | 
| 227   <p> |  | 
| 228   Except as otherwise <a href="http://code.google.com/policies.html#restrictions
     ">noted</a>, |  | 
| 229   the content of this page is licensed under the <a rel="license" href="http://c
     reativecommons.org/licenses/by/3.0/">Creative Commons |  | 
| 230   Attribution 3.0 License</a>, and code samples are licensed under the |  | 
| 231   <a rel="license" href="http://code.google.com/google_bsd_license.html">BSD Lic
     ense</a>. |  | 
| 232   </p> |  | 
| 233   <p> |  | 
| 234   ©2011 Google |  | 
| 235   </p> |  | 
| 236 <!-- begin analytics --> |  | 
| 237 <script src="https://www.google-analytics.com/urchin.js" type="text/javascript">
     </script> |  | 
| 238 <script src="https://www.google-analytics.com/ga.js" type="text/javascript"></sc
     ript> |  | 
| 239 <script type="text/javascript"> |  | 
| 240   // chrome doc tracking |  | 
| 241   try { |  | 
| 242     var engdocs = _gat._getTracker("YT-10763712-2"); |  | 
| 243     engdocs._trackPageview(); |  | 
| 244   } catch(err) {} |  | 
| 245   // code.google.com site-wide tracking |  | 
| 246   try { |  | 
| 247     _uacct="UA-18071-1"; |  | 
| 248     _uanchor=1; |  | 
| 249     _uff=0; |  | 
| 250     urchinTracker(); |  | 
| 251   } |  | 
| 252   catch(e) {/* urchinTracker not available. */} |  | 
| 253 </script> |  | 
| 254 <!-- end analytics --> |  | 
| 255       </div> |  | 
| 256     </div> <!-- /gc-footer --> |  | 
| 257   </div> <!-- /gc-container --> |  | 
| 258 </body></html> |  | 
| OLD | NEW | 
|---|