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: Getting Started (Hello, World!) - 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 class="leftNavSelected">Getting Started</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><a href="tut_debugging.html">Debugging</a></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: Getting Started (Hello, World!)</h1> 255 </div> 256 <!-- TABLE OF CONTENTS --> 257 <div id="toc"> 258 <h2>Contents</h2> 259 <ol> 260 <li> 261 <a href="#load">Create and load an extension</a> 262 <ol> 263 <li style="display: none; "> 264 <a>h3Name</a> 265 </li> 266 </ol> 267 </li><li> 268 <a href="#code">Add code to the extension</a> 269 <ol> 270 <li style="display: none; "> 271 <a>h3Name</a> 272 </li> 273 </ol> 274 </li><li> 275 <a href="#summary">Now what?</a> 276 <ol> 277 <li style="display: none; "> 278 <a>h3Name</a> 279 </li> 280 </ol> 281 </li> 282 <li style="display: none; "> 283 <a href="#apiReference">API reference</a> 284 <ol> 285 <li> 286 <a href="#properties">Properties</a> 287 <ol> 288 <li> 289 <a href="#property-anchor">propertyName</a> 290 </li> 291 </ol> 292 </li> 293 <li> 294 <a>Methods</a> 295 <ol> 296 <li> 297 <a href="#method-anchor">methodName</a> 298 </li> 299 </ol> 300 </li> 301 <li> 302 <a>Events</a> 303 <ol> 304 <li> 305 <a href="#event-anchor">eventName</a> 306 </li> 307 </ol> 308 </li> 309 <li> 310 <a href="#types">Types</a> 311 <ol> 312 <li> 313 <a href="#id-anchor">id</a> 314 </li> 315 </ol> 316 </li> 317 </ol> 318 </li> 319 </ol> 320 </div> 321 <!-- /TABLE OF CONTENTS --> 322 323 <!-- Standard content lead-in for experimental API pages --> 324 <p id="classSummary" style="display: none; "> 325 For information on how to use experimental APIs, see the <a href="experimental.html">chrome.experimental.* APIs</a> page. 326 </p> 327 328 <!-- STATIC CONTENT PLACEHOLDER --> 329 <div id="static"><div id="pageData-name" class="pageData">Tutorial: Getting Started (Hello, World!)</div> 330 <div id="pageData-showTOC" class="pageData">true</div> 331 332 <p> 333 This tutorial walks you through creating a simple extension. 334 You'll add an icon to Google Chrome 335 that, when clicked, displays an automatically generated page. 336 The icon and page will look something like this: 337 </p> 338 339 <img src="images/hello-world-small.png" width="300" height="221" alt="a window with a grid of images related to HELLO WORLD"> 340 341 <p> 342 You can develop extensions using any release of Google Chrome, 343 on Windows, Mac, or Linux. 344 </p> 345 346 <h2 id="load">Create and load an extension</h2> 347 <p> 348 In this section, you'll write an extension 349 that adds a <em>browser action</em> 350 to the toolbar of Google Chrome. 351 </p> 352 353 <ol> 354 <li> 355 Create a folder somewhere on your computer to contain your extension's code. 356 </li> 357 <li> 358 Inside your extension's folder, 359 create a text file called <strong><code>manifest.json</code></strong>, 360 and put this in it: 361 <pre>{ 362 "name": "My First Extension", 363 "version": "1.0", 364 "description": "The first extension that I made.", 365 "browser_action": { 366 "default_icon": "icon.png" 367 }, 368 "permissions": [ 369 "http://api.flickr.com/" 370 ] 371 }</pre> 372 </li> 373 <li> 374 Copy this icon to the same folder:<br> 375 <table cellpadding="0" cellspacing="0" style="border:0"> 376 <tbody><tr> 377 <td style="text-align:center; border:0;"><a href="examples/tutorials/getstarted/icon.png"><img src="examples/tutorials/getstarted/icon.png" width="19" height="19" border="0"></a><br> 378 <a href="examples/tutorials/getstarted/icon.png">Download icon.png</a></td> 379 </tr> 380 </tbody></table> 381 </li> 382 <li id="load-ext"> Load the extension. 383 <ol type="a"> 384 <li style="margin-top:0"> 385 Bring up the extensions management page 386 by clicking the wrench icon 387 <img src="images/toolsmenu.gif" width="29" height="29" alt="" style="margin-top:0"> 388 and choosing <b>Tools > Extensions</b>. 389 </li> 390 391 <li> 392 If <b>Developer mode</b> has a + by it, 393 click the + to add developer information to the page. 394 The + changes to a -, 395 and more buttons and information appear. 396 </li> 397 398 <li> 399 Click the <b>Load unpacked extension</b> button. 400 A file dialog appears. 401 </li> 402 403 <li> 404 In the file dialog, 405 navigate to your extension's folder 406 and click <b>OK</b>. 407 </li> 408 </ol> </li> 409 </ol> 410 411 <p> 412 If your extension is valid, 413 its icon appears next to the address bar, 414 and information about the extension 415 appears in the extensions page, 416 as the following screenshot shows. 417 </p> 418 419 <p> 420 <a href="images/load_after.png"><img src="images/load_after_small.png" width="300" height="132"></a> 421 </p> 422 423 <h2 id="code">Add code to the extension</h2> 424 <p> In this step, you'll make your extension <em>do</em> something besides just look good. </p> 425 <ol> 426 <li> 427 <p> Edit <code>manifest.json</code> to add the following line:</p> 428 <pre> ... 429 "browser_action": { 430 "default_icon": "icon.png"<b>, 431 "popup": "popup.html"</b> 432 }, 433 ... 434 </pre> 435 <p> Inside your extension's folder, 436 create a text file called <strong><code>popup.html</code></strong>, 437 and add the following code to it:</p> 438 <blockquote> <a href="http://src.chromium.org/viewvc/chrome/trunk/src/chrome/common/extensions/docs/examples/tutorials/getstarted/popup.html?content-type=text/plain" target="_blank">CSS 439 and JavaScript code for hello_world</a></blockquote> 440 </li> 441 <li> 442 Return to the extensions management page, 443 and click the <b>Reload</b> button 444 to load the new version of the extension.</li> 445 <li>Click the extension's icon. 446 A popup should appear that displays the contents of 447 <code>popup.html</code>. </li> 448 </ol> 449 <p> It should look something like this:</p> 450 451 <img src="images/hello-world.png" width="500" height="369" alt="a popup with a grid of images related to HELLO WORLD"> 452 453 <p> If you don't see the popup, 454 try the instructions again, 455 following them exactly. 456 Don't try loading an HTML file that isn't in the extension's folder 457 it won't work! </p> 458 459 <h2 id="summary">Now what?</h2> 460 461 <!-- [PENDING: Summarize what we did, what it means, what else we would've done if this were a real extension (e.g. package/zip it), and where to find more information.] --> 462 463 <p> 464 Here are some suggestions for what to read next: 465 </p> 466 467 <ul> 468 <li> 469 The <a href="overview.html">Overview</a>, 470 which has important conceptual and practical information 471 </li> 472 <li> 473 The 474 <a href="tut_debugging.html">debugging tutorial</a>, 475 which starts where this tutorial leaves off 476 </li> 477 <li> 478 The <a href="hosting.html">hosting</a> page, 479 which tells you about options for distributing your extension 480 </li> 481 </ul> 482 483 <p> 484 If you don't feel like reading, try these: 485 </p> 486 <ul> 487 <li> 488 Keep up to date with the latest news: 489 <a href="http://groups.google.com/a/chromium.org/group/chromium-extensions/subscribe">subscribe to chromium-extensions</a> 490 </li> 491 <li> 492 Look at some 493 <a href="samples.html">sample extensions</a> 494 </li> 495 <li> 496 Watch some 497 <a href="http://www.youtube.com/view_play_list?p=CA101D6A85FE9D4B">videos</a>, such as 498 <a href="http://www.youtube.com/watch?v=e3McMaHvlBY&feature=PlayList&p=CA101D6A85FE9D4B&index=3">How to build an extension</a> 499 </li> 500 </ul> 501 </div> 502 503 <!-- API PAGE --> 504 <div class="apiPage" style="display: none; "> 505 <a name="apiReference"></a> 506 <h2>API reference: chrome.apiname </h2> 507 508 <!-- PROPERTIES --> 509 <div class="apiGroup"> 510 <a name="properties"></a> 511 <h3 id="properties">Properties</h3> 512 513 <div> 514 <a></a> 515 <h4>getLastError</h4> 516 <div class="summary"> 517 <!-- Note: intentionally longer 80 columns --> 518 <span>chrome.extension</span><span>lastError</span> 519 </div> 520 <div> 521 </div> 522 </div> 523 524 </div> <!-- /apiGroup --> 525 526 <!-- METHODS --> 527 <div id="methodsTemplate" class="apiGroup"> 528 <a></a> 529 <h3>Methods</h3> 530 531 <!-- iterates over all functions --> 532 <div class="apiItem"> 533 <a></a> <!-- method-anchor --> 534 <h4>method name</h4> 535 536 <div class="summary"><span>void</span> 537 <!-- Note: intentionally longer 80 columns --> 538 <span>chrome.module.methodName</span>(<span><span>, </span><span></span> 539 <var><span></span></var></span>)</div> 540 541 <div class="description"> 542 <p class="todo">Undocumented.</p> 543 <p> 544 A description from the json schema def of the function goes here. 545 </p> 546 547 <!-- PARAMETERS --> 548 <h4>Parameters</h4> 549 <dl> 550 <div> 551 <div> 552 </div> 553 </div> 554 </dl> 555 556 <!-- RETURNS --> 557 <h4>Returns</h4> 558 <dl> 559 <div> 560 <div> 561 </div> 562 </div> 563 </dl> 564 565 <!-- CALLBACK --> 566 <div> 567 <div> 568 <h4>Callback function</h4> 569 <p> 570 The callback <em>parameter</em> should specify a function 571 that looks like this: 572 </p> 573 <p> 574 If you specify the <em>callback</em> parameter, it should 575 specify a function that looks like this: 576 </p> 577 578 <!-- Note: intentionally longer 80 columns --> 579 <pre>function(<span>Type param1, Type param2</span>) <span class="subdued">{...}</span>;</pre> 580 <dl> 581 <div> 582 <div> 583 </div> 584 </div> 585 </dl> 586 </div> 587 </div> 588 589 <!-- MIN_VERSION --> 590 <p> 591 This function was added in version <b><span></span></b>. 592 If you require this function, the manifest key 593 <a href="manifest.html#minimum_chrome_version">minimum_chrome_version</a> 594 can ensure that your extension won't be run in an earlier browser version. 595 </p> 596 </div> <!-- /description --> 597 598 </div> <!-- /apiItem --> 599 600 </div> <!-- /apiGroup --> 601 602 <!-- EVENTS --> 603 <div id="eventsTemplate" class="apiGroup"> 604 <a></a> 605 <h3>Events</h3> 606 <!-- iterates over all events --> 607 <div class="apiItem"> 608 <a></a> 609 <h4>event name</h4> 610 611 <div class="summary"> 612 <!-- Note: intentionally longer 80 columns --> 613 <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>); 614 </div> 615 616 <div class="description"> 617 <p class="todo">Undocumented.</p> 618 <p> 619 A description from the json schema def of the event goes here. 620 </p> 621 622 <!-- PARAMETERS --> 623 <div> 624 <h4>Parameters</h4> 625 <dl> 626 <div> 627 <div> 628 </div> 629 </div> 630 </dl> 631 </div> 632 </div> <!-- /decription --> 633 634 </div> <!-- /apiItem --> 635 636 </div> <!-- /apiGroup --> 637 638 <!-- TYPES --> 639 <div class="apiGroup"> 640 <a name="types"></a> 641 <h3 id="types">Types</h3> 642 643 <!-- iterates over all types --> 644 <div class="apiItem"> 645 <a></a> 646 <h4>type name</h4> 647 648 <div> 649 </div> 650 651 </div> <!-- /apiItem --> 652 653 </div> <!-- /apiGroup --> 654 655 </div> <!-- /apiPage --> 656 </div> <!-- /gc-pagecontent --> 657 </div> <!-- /g-section --> 658 </div> <!-- /codesiteContent --> 659 <div id="gc-footer" --=""> 660 <div class="text"> 661 <p> 662 Except as otherwise <a href="http://code.google.com/policies.html#restrictions">noted</a>, 663 the content of this page is licensed under the <a rel="license" href="http://creativecommons.org/licenses/by/3.0/">Creative Commons 664 Attribution 3.0 License</a>, and code samples are licensed under the 665 <a rel="license" href="http://code.google.com/google_bsd_license.html">BSD License</a>. 666 </p> 667 <p> 668 2011 Google 669 </p> 670 671 <!-- begin analytics --> 672 <script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script> 673 <script src="http://www.google-analytics.com/ga.js" type="text/javascript"></script> 674 675 <script type="text/javascript"> 676 // chrome doc tracking 677 try { 678 var engdocs = _gat._getTracker("YT-10763712-2"); 679 engdocs._trackPageview(); 680 } catch(err) {} 681 682 // code.google.com site-wide tracking 683 try { 684 _uacct="UA-18071-1"; 685 _uanchor=1; 686 _uff=0; 687 urchinTracker(); 688 } 689 catch(e) {/* urchinTracker not available. */} 690 </script> 691 <!-- end analytics --> 692 </div> 693 </div> <!-- /gc-footer --> 694 </div> <!-- /gc-container --> 695 </body></html> 696
