Home | History | Annotate | Download | only in docs
      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>Tutorial: Debugging - 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           <!-- OBJECT METHODS -->
     85           <dd>
     86             <div></div>
     87           </dd>
     88 
     89           <!-- OBJECT EVENT FIELDS -->
     90           <dd>
     91             <div></div>
     92           </dd>
     93 
     94           <!-- FUNCTION PARAMETERS -->
     95           <dd>
     96             <div></div>
     97           </dd>
     98 
     99         </div> <!-- /VALUE -->
    100 
    101         <div id="functionParametersTemplate">
    102           <h5>Parameters</h5>
    103           <dl>
    104             <div>
    105               <div>
    106               </div>
    107             </div>
    108           </dl>
    109         </div>
    110       </div> <!-- /SUBTEMPLATES -->
    111 
    112   <a id="top"></a>
    113     <div id="skipto">
    114       <a href="#gc-pagecontent">Skip to page content</a>
    115       <a href="#gc-toc">Skip to main navigation</a>
    116     </div>
    117     <!-- API HEADER -->
    118     <table id="header" width="100%" cellspacing="0" border="0">
    119       <tbody><tr>
    120         <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>
    121         <td valign="middle" width="100%" style="padding-left:0.6em;">
    122           <form action="http://www.google.com/cse" id="cse" style="margin-top:0.5em">
    123             <div id="gsc-search-box">
    124               <input type="hidden" name="cx" value="002967670403910741006:61_cvzfqtno">
    125               <input type="hidden" name="ie" value="UTF-8">
    126               <input type="text" name="q" value="" size="55">
    127               <input class="gsc-search-button" type="submit" name="sa" value="Search">
    128               <br>
    129               <span class="greytext">e.g. "page action" or "tabs"</span>
    130             </div>
    131           </form>
    132 
    133           <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    134           <script type="text/javascript">google.load("elements", "1", {packages: "transliteration"});</script>
    135           <script type="text/javascript" src="http://www.google.com/coop/cse/t13n?form=cse&t13n_langs=en"></script>
    136           <script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse&lang=en"></script>
    137         </td>
    138       </tr>
    139     </tbody></table>
    140 
    141     <div id="codesiteContent" class="">
    142 
    143       <a id="gc-topnav-anchor"></a>
    144       <div id="gc-topnav">
    145         <h1>Google Chrome Extensions (<a href="http://code.google.com/labs/">Labs</a>)</h1>
    146         <ul id="home" class="gc-topnav-tabs">
    147           <li id="home_link">
    148             <a href="index.html" title="Google Chrome Extensions home page">Home</a>
    149           </li>
    150           <li id="docs_link">
    151             <a href="docs.html" title="Official Google Chrome Extensions documentation">Docs</a>
    152           </li>
    153           <li id="faq_link">
    154             <a href="faq.html" title="Answers to frequently asked questions about Google Chrome Extensions">FAQ</a>
    155           </li>
    156           <li id="samples_link">
    157             <a href="samples.html" title="Sample extensions (with source code)">Samples</a>
    158           </li>
    159           <li id="group_link">
    160             <a href="http://groups.google.com/a/chromium.org/group/chromium-extensions" title="Google Chrome Extensions developer forum">Group</a>
    161           </li>
    162         </ul>
    163       </div> <!-- end gc-topnav -->
    164 
    165     <div class="g-section g-tpl-170">
    166       <!-- SIDENAV -->
    167       <div class="g-unit g-first" id="gc-toc">
    168         <ul>
    169           <li><a href="getstarted.html">Getting Started</a></li>
    170           <li><a href="overview.html">Overview</a></li>
    171           <li><a href="whats_new.html">What's New?</a></li>
    172           <li><h2><a href="devguide.html">Developer's Guide</a></h2>
    173             <ul>
    174               <li>Browser UI
    175                 <ul>
    176                   <li><a href="browserAction.html">Browser Actions</a></li>
    177                   <li><a href="contextMenus.html">Context Menus</a></li>
    178                   <li><a href="notifications.html">Desktop Notifications</a></li>
    179                   <li><a href="omnibox.html">Omnibox</a></li>
    180                   <li><a href="options.html">Options Pages</a></li>
    181                   <li><a href="override.html">Override Pages</a></li>
    182                   <li><a href="pageAction.html">Page Actions</a></li>
    183                 </ul>
    184               </li>
    185               <li>Browser Interaction
    186                 <ul>
    187                   <li><a href="bookmarks.html">Bookmarks</a></li>
    188                   <li><a href="cookies.html">Cookies</a></li>
    189                   <li><a href="events.html">Events</a></li>
    190                   <li><a href="history.html">History</a></li>
    191                   <li><a href="management.html">Management</a></li>
    192                   <li><a href="tabs.html">Tabs</a></li>
    193                   <li><a href="windows.html">Windows</a></li>
    194                 </ul>
    195               </li>
    196               <li>Implementation
    197                 <ul>
    198                   <li><a href="a11y.html">Accessibility</a></li>
    199                   <li><a href="background_pages.html">Background Pages</a></li>
    200                   <li><a href="content_scripts.html">Content Scripts</a></li>
    201                   <li><a href="xhr.html">Cross-Origin XHR</a></li>
    202                   <li><a href="idle.html">Idle</a></li>
    203                   <li><a href="i18n.html">Internationalization</a></li>
    204                   <li><a href="messaging.html">Message Passing</a></li>
    205                   <li><a href="npapi.html">NPAPI Plugins</a></li>
    206                 </ul>
    207               </li>
    208               <li>Finishing
    209                 <ul>
    210                   <li><a href="hosting.html">Hosting</a></li>
    211                   <li><a href="external_extensions.html">Other Deployment Options</a></li>
    212                 </ul>
    213               </li>
    214             </ul>
    215           </li>
    216           <li><h2><a href="apps.html">Packaged Apps</a></h2></li>
    217           <li><h2><a href="tutorials.html">Tutorials</a></h2>
    218             <ul>
    219               <li class="leftNavSelected">Debugging</li>
    220               <li><a href="tut_analytics.html">Google Analytics</a></li>
    221               <li><a href="tut_oauth.html">OAuth</a></li>
    222             </ul>
    223           </li>
    224           <li><h2>Reference</h2>
    225             <ul>
    226               <li>Formats
    227                 <ul>
    228                   <li><a href="manifest.html">Manifest Files</a></li>
    229                   <li><a href="match_patterns.html">Match Patterns</a></li>
    230                 </ul>
    231               </li>
    232               <li><a href="permission_warnings.html">Permission Warnings</a></li>
    233               <li><a href="api_index.html">chrome.* APIs</a></li>
    234               <li><a href="api_other.html">Other APIs</a></li>
    235             </ul>
    236           </li>
    237           <li><h2><a href="samples.html">Samples</a></h2></li>
    238           <div class="line"> </div>
    239           <li><h2>More</h2>
    240             <ul>
    241               <li><a href="http://code.google.com/chrome/webstore/docs/index.html">Chrome Web Store</a></li>
    242               <li><a href="http://code.google.com/chrome/apps/docs/developers_guide.html">Hosted Apps</a></li>
    243               <li><a href="themes.html">Themes</a></li>
    244             </ul>
    245           </li>
    246         </ul>
    247       </div>
    248       <script>
    249         initToggles();
    250       </script>
    251 
    252     <div class="g-unit" id="gc-pagecontent">
    253       <div id="pageTitle">
    254         <h1 class="page_title">Tutorial: Debugging</h1>
    255       </div>
    256         <!-- TABLE OF CONTENTS -->
    257         <div id="toc">
    258           <h2>Contents</h2>
    259           <ol>
    260             <li>
    261               <a href="#extension-info"> View extension information </a>
    262               <ol>
    263                 <li style="display: none; ">
    264                   <a>h3Name</a>
    265                 </li>
    266               </ol>
    267             </li><li>
    268               <a href="#inspect-popup"> Inspect the popup </a>
    269               <ol>
    270                 <li style="display: none; ">
    271                   <a>h3Name</a>
    272                 </li>
    273               </ol>
    274             </li><li>
    275               <a href="#debug"> Use the debugger </a>
    276               <ol>
    277                 <li style="display: none; ">
    278                   <a>h3Name</a>
    279                 </li>
    280               </ol>
    281             </li><li>
    282               <a href="#summary">Summary</a>
    283               <ol>
    284                 <li style="display: none; ">
    285                   <a>h3Name</a>
    286                 </li>
    287               </ol>
    288             </li><li>
    289               <a href="#next">Now what?</a>
    290               <ol>
    291                 <li style="display: none; ">
    292                   <a>h3Name</a>
    293                 </li>
    294               </ol>
    295             </li>
    296               <li style="display: none; ">
    297                 <a href="#apiReference">API reference</a>
    298                 <ol>
    299                   <li>
    300                     <a href="#properties">Properties</a>
    301                     <ol>
    302                       <li>
    303                         <a href="#property-anchor">propertyName</a>
    304                       </li>
    305                     </ol>
    306                   </li>
    307                   <li>
    308                     <a>Methods</a>
    309                     <ol>
    310                       <li>
    311                         <a href="#method-anchor">methodName</a>
    312                       </li>
    313                     </ol>
    314                   </li>
    315                   <li>
    316                     <a>Events</a>
    317                     <ol>
    318                       <li>
    319                         <a href="#event-anchor">eventName</a>
    320                       </li>
    321                     </ol>
    322                   </li>
    323                   <li>
    324                     <a href="#types">Types</a>
    325                     <ol>
    326                       <li>
    327                         <a href="#id-anchor">id</a>
    328                       </li>
    329                     </ol>
    330                   </li>
    331                 </ol>
    332               </li>
    333           </ol>
    334         </div>
    335         <!-- /TABLE OF CONTENTS -->
    336 
    337         <!-- Standard content lead-in for experimental API pages -->
    338         <p id="classSummary" style="display: none; ">
    339           For information on how to use experimental APIs, see the <a href="experimental.html">chrome.experimental.* APIs</a> page.
    340         </p>
    341 
    342         <!-- STATIC CONTENT PLACEHOLDER -->
    343         <div id="static"><div id="pageData-name" class="pageData">Tutorial: Debugging</div>
    344 <div id="pageData-showTOC" class="pageData">true</div>
    345 
    346 <p>
    347 This tutorial introduces you to using
    348 Google Chrome's built-in Developer Tools
    349 to interactively debug an extension.
    350 </p>
    351 
    352 
    353 <h2 id="extension-info"> View extension information </h2>
    354 
    355 <p>
    356 To follow this tutorial, you need
    357 the Hello World extension that was featured in
    358 <a href="getstarted.html">Getting Started</a>.
    359 In this section,
    360 you'll load the extension
    361 and take a look at its information
    362 in the Extensions page.
    363 </p>
    364 
    365 <ol>
    366   <li>
    367     <p>
    368       Load the Hello World extension if it isn't already running.
    369       If the extension is running,
    370       you'll see the Hello World icon
    371       <img src="examples/tutorials/getstarted/icon.png" width="19" height="19" alt="" style="margin:0">
    372       to the right of
    373       your browser's address bar.
    374     </p>
    375 
    376     <p>
    377       If the Hello World extension isn't already running,
    378       find the extension files and load them.
    379       If you don't have a handy copy of the files,
    380       extract them from this
    381       <a href="examples/tutorials/getstarted.zip">ZIP file</a>.
    382       See Getting Started if you need
    383       <a href="getstarted.html#load-ext">instructions
    384       for loading the extension</a>.
    385     </p>
    386   </li>
    387 
    388   <li>
    389   Go to the Extensions page
    390   (<b>chrome://extensions</b>),
    391   and make sure the page is in Developer mode.
    392   </li>
    393 
    394   <li>
    395   Look at the Hello World extension's information on that page.
    396   You can see details such as the extension's
    397   name, description, and ID.
    398   </li>
    399 </ol>
    400 
    401 <h2 id="inspect-popup"> Inspect the popup </h2>
    402 
    403 <p>
    404 As long as your browser is in Developer mode, it's easy to inspect popups.
    405 </p>
    406 
    407 <ol>
    408   <li>
    409   Go to the Extensions page (<b>chrome://extensions</b>), and make sure Developer
    410   mode is still enabled. The Extensions page doesn't need to be open
    411   for the following to work. The browser remembers the setting,
    412   even when the page isn't shown.
    413   </li>
    414   <li>
    415   Right-click the Hello World icon
    416   <img src="examples/tutorials/getstarted/icon.png" width="19" height="19" alt="" style="margin:0">
    417   and choose the <b>Inspect popup</b> menu item. The popup appears,
    418   and a Developer Tools window like the following should display the code
    419   for <b>popup.html</b>.
    420 
    421   <p>
    422      <img src="images/devtools-1.gif" alt="" width="500" height="294">
    423      </p> 
    424   The popup remains open as long as the Developer Tools window does.  
    425   </li>
    426   <li>
    427   If the <strong>Scripts</strong> button isn't already selected,
    428   click it.
    429   <!-- [PENDING: can we omit this step?] -->
    430   </li>
    431   <li>
    432   Click the console button
    433   <img src="images/console-button.gif" style="margin:0; padding:0" align="absmiddle" width="26" height="22" alt="">(second
    434   from left,
    435   at the bottom of the Developer Tools window)
    436   so that you can see both the code and the console.
    437   </li>
    438 </ol>
    439 
    440 <h2 id="debug"> Use the debugger </h2>
    441 
    442 <p>
    443 In this section,
    444 you'll follow the execution of the popup page
    445 as it adds images to itself.
    446 </p>
    447 
    448 <ol>
    449   <li>
    450   Set a breakpoint inside the image-adding loop
    451   by searching for the string <b>img.src</b>
    452   and clicking the number of the line where it occurs
    453   (for example, <strong>37</strong>):
    454   <p>
    455   <img src="images/devtools-2.gif" alt="" width="500" height="294">
    456   </p>
    457   </li>
    458 
    459   <li>
    460   Make sure you can see the <b>popup.html</b> tab.
    461   It should show 20 "hello world" images.
    462   </li>
    463 
    464   <li>
    465   At the console prompt, reload the popup page
    466   by entering <b>location.reload(true)</b>:
    467 
    468 <pre>&gt; <b>location.reload(true)</b>
    469 </pre>
    470 
    471   <p>
    472   The popup page goes blank as it begins to reload,
    473   and its execution stops at line 37.
    474   </p>
    475   </li>
    476 
    477   <li>
    478   In the upper right part of the tools window,
    479   you should see the local scope variables.
    480   This section shows the current values of all variables in the current scope.
    481   For example, in the following screenshot
    482   the value of <code>i</code> is 0, and
    483   <code>photos</code> is a node list
    484   that contains at least a few elements.
    485   (In fact, it contains 20 elements at indexes 0 through 19,
    486   each one representing a photo.)
    487 
    488   <p>
    489   <img src="images/devtools-localvars.gif" alt="" width="225" height="215">
    490   </p>
    491   </li>
    492 
    493   <li>
    494   Click the play/pause button
    495   <img src="images/play-button.gif" style="margin:0; padding:0" align="absmiddle" width="22" height="20" alt="">(near
    496   the top right of the Developer Tools window)
    497   to go through the image-processing loop a single time.
    498   Each time you click that button,
    499   the value of <code>i</code> increments and
    500   another icon appears in the popup page.
    501   For example, when <code>i</code> is 10,
    502   the popup page looks something like this:
    503   </li>
    504 
    505   <p>
    506   <img src="images/devtools-3.gif" width="500" height="245" alt="the popup page with 10 images">
    507   </p>
    508 
    509   <li>
    510   Use the buttons next to the play/pause button
    511   to step over, into, and out of function calls.
    512   To let the page finish loading,
    513   click line <b>37</b> to disable the breakpoint,
    514   and then press play/pause
    515   <img src="images/play-button.gif" style="margin:0; padding:0" align="absmiddle" width="22" height="20" alt="">to
    516   continue execution.
    517   </li>
    518 
    519 </ol>
    520 
    521 
    522 <h2 id="summary">Summary</h2>
    523 
    524 <p>
    525 This tutorial demonstrated some techniques you can use
    526 to debug your extensions:
    527 </p>
    528 
    529 <ul>
    530   <li>
    531     Find your extension's ID and links to its pages in
    532     the <b>Extensions</b> page
    533     (<b>chrome://extensions</b>).
    534   </li>
    535   <li>
    536     View hard-to-reach pages
    537     (and any other file in your extension) using
    538     <b>chrome-extension://</b><em>extensionId</em><b>/</b><em>filename</em>.
    539   </li>
    540   <li>
    541     Use Developer Tools to inspect
    542     and step through a page's JavaScript code.
    543   </li>
    544   <li>
    545     Reload the currently inspected page from the console
    546     using <b>location.reload(true)</b>.
    547   </li>
    548 </ul>
    549 
    550 
    551 <h2 id="next">Now what?</h2>
    552 
    553 <p>
    554 Now that you've been introduced to debugging,
    555 here are suggestions for what to do next:
    556 </p>
    557 
    558 <ul>
    559   <li>
    560     Watch the extensions video
    561     <a href="http://www.youtube.com/watch?v=IP0nMv_NI1s&feature=PlayList&p=CA101D6A85FE9D4B&index=5">Developing and Debugging</a>.
    562   </li>
    563   <li>
    564     Try installing and inspecting other extensions,
    565     such as the
    566     <a href="samples.html">samples</a>.
    567   </li>
    568   <li>
    569     Try using widely available debugging APIs such as
    570     <code>console.log()</code> and <code>console.error()</code>
    571     in your extension's JavaScript code.
    572     Example: <code>console.log("Hello, world!")</code>
    573   </li>
    574   <li>
    575     Follow the <a href="http://www.chromium.org/devtools/google-chrome-developer-tools-tutorial">Developer Tools tutorial</a>,
    576     explore the
    577     <a href="http://www.chromium.org/devtools">Developer Tools site</a>,
    578     and watch some video tutorials.
    579   </li>
    580 </ul>
    581 
    582 <!-- [PENDING: do something to help people debug content scripts, which show up in blue] -->
    583 
    584 <p>
    585 For more ideas,
    586 see the <a href="getstarted.html#summary">Now what?</a> section
    587 of Getting Started.
    588 </p>
    589 </div>
    590 
    591         <!-- API PAGE -->
    592         <div class="apiPage" style="display: none; ">
    593         <a name="apiReference"></a>
    594         <h2>API reference: chrome.apiname </h2>
    595 
    596           <!-- PROPERTIES -->
    597           <div class="apiGroup">
    598             <a name="properties"></a>
    599             <h3 id="properties">Properties</h3>
    600 
    601             <div>
    602               <a></a>
    603               <h4>getLastError</h4>
    604               <div class="summary">
    605                 <!-- Note: intentionally longer 80 columns -->
    606                 <span>chrome.extension</span><span>lastError</span>
    607               </div>
    608               <div>
    609               </div>
    610             </div>
    611 
    612           </div> <!-- /apiGroup -->
    613 
    614           <!-- METHODS -->
    615           <div id="methodsTemplate" class="apiGroup">
    616             <a></a>
    617             <h3>Methods</h3>
    618 
    619             <!-- iterates over all functions -->
    620             <div class="apiItem">
    621               <a></a> <!-- method-anchor -->
    622               <h4>method name</h4>
    623 
    624               <div class="summary"><span>void</span>
    625                   <!-- Note: intentionally longer 80 columns -->
    626                   <span>chrome.module.methodName</span>(<span><span>, </span><span></span>
    627                       <var><span></span></var></span>)</div>
    628 
    629               <div class="description">
    630                 <p class="todo">Undocumented.</p>
    631                 <p>
    632                   A description from the json schema def of the function goes here.
    633                 </p>
    634 
    635                 <!-- PARAMETERS -->
    636                 <h4>Parameters</h4>
    637                 <dl>
    638                   <div>
    639                     <div>
    640                     </div>
    641                   </div>
    642                 </dl>
    643 
    644                 <!-- RETURNS -->
    645                 <h4>Returns</h4>
    646                 <dl>
    647                   <div>
    648                     <div>
    649                     </div>
    650                   </div>
    651                 </dl>
    652 
    653                 <!-- CALLBACK -->
    654                 <div>
    655                   <div>
    656                   <h4>Callback function</h4>
    657                   <p>
    658                     The callback <em>parameter</em> should specify a function
    659                     that looks like this:
    660                   </p>
    661                   <p>
    662                     If you specify the <em>callback</em> parameter, it should
    663                     specify a function that looks like this:
    664                   </p>
    665 
    666                   <!-- Note: intentionally longer 80 columns -->
    667                   <pre>function(<span>Type param1, Type param2</span>) <span class="subdued">{...}</span>;</pre>
    668                   <dl>
    669                     <div>
    670                       <div>
    671                       </div>
    672                     </div>
    673                   </dl>
    674                   </div>
    675                 </div>
    676 
    677                 <!-- MIN_VERSION -->
    678                 <p>
    679                   This function was added in version <b><span></span></b>.
    680                   If you require this function, the manifest key
    681                   <a href="manifest.html#minimum_chrome_version">minimum_chrome_version</a>
    682                   can ensure that your extension won't be run in an earlier browser version.
    683                 </p>
    684               </div> <!-- /description -->
    685 
    686             </div>  <!-- /apiItem -->
    687 
    688           </div>  <!-- /apiGroup -->
    689 
    690           <!-- EVENTS -->
    691           <div id="eventsTemplate" class="apiGroup">
    692             <a></a>
    693             <h3>Events</h3>
    694             <!-- iterates over all events -->
    695             <div class="apiItem">
    696               <a></a>
    697               <h4>event name</h4>
    698 
    699               <div class="summary">
    700                 <!-- Note: intentionally longer 80 columns -->
    701                 <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>);
    702               </div>
    703 
    704               <div class="description">
    705                 <p class="todo">Undocumented.</p>
    706                 <p>
    707                   A description from the json schema def of the event goes here.
    708                 </p>
    709 
    710                 <!-- PARAMETERS -->
    711                 <div>
    712                   <h4>Parameters</h4>
    713                   <dl>
    714                     <div>
    715                       <div>
    716                       </div>
    717                     </div>
    718                   </dl>
    719                 </div>
    720               </div> <!-- /decription -->
    721 
    722             </div> <!-- /apiItem -->
    723 
    724           </div> <!-- /apiGroup -->
    725 
    726           <!-- TYPES -->
    727           <div class="apiGroup">
    728             <a name="types"></a>
    729             <h3 id="types">Types</h3>
    730 
    731             <!-- iterates over all types -->
    732             <div class="apiItem">
    733               <a></a>
    734               <h4>type name</h4>
    735 
    736               <div>
    737               </div>
    738 
    739             </div> <!-- /apiItem -->
    740 
    741           </div> <!-- /apiGroup -->
    742 
    743         </div> <!-- /apiPage -->
    744       </div> <!-- /gc-pagecontent -->
    745     </div> <!-- /g-section -->
    746   </div> <!-- /codesiteContent -->
    747     <div id="gc-footer" --="">
    748       <div class="text">
    749   <p>
    750   Except as otherwise <a href="http://code.google.com/policies.html#restrictions">noted</a>,
    751   the content of this page is licensed under the <a rel="license" href="http://creativecommons.org/licenses/by/3.0/">Creative Commons
    752   Attribution 3.0 License</a>, and code samples are licensed under the
    753   <a rel="license" href="http://code.google.com/google_bsd_license.html">BSD License</a>.
    754   </p>
    755   <p>
    756   2011 Google
    757   </p>
    758 
    759 <!-- begin analytics -->
    760 <script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
    761 <script src="http://www.google-analytics.com/ga.js" type="text/javascript"></script>
    762 
    763 <script type="text/javascript">
    764   // chrome doc tracking
    765   try {
    766     var engdocs = _gat._getTracker("YT-10763712-2");
    767     engdocs._trackPageview();
    768   } catch(err) {}
    769 
    770   // code.google.com site-wide tracking
    771   try {
    772     _uacct="UA-18071-1";
    773     _uanchor=1;
    774     _uff=0;
    775     urchinTracker();
    776   }
    777   catch(e) {/* urchinTracker not available. */}
    778 </script>
    779 <!-- end analytics -->
    780       </div>
    781     </div> <!-- /gc-footer -->
    782   </div> <!-- /gc-container -->
    783 </body></html>
    784