• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
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&amp;t13n_langs=en"></script>
136          <script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse&amp;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>
333This tutorial walks you through creating a simple extension.
334You'll add an icon to Google Chrome
335that, when clicked, displays an automatically generated page.
336The 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>
342You can develop extensions using any release of Google Chrome,
343on Windows, Mac, or Linux.
344</p>
345
346<h2 id="load">Create and load an extension</h2>
347<p>
348In this section, you'll write an extension
349that adds a <em>browser action</em>
350to 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 &gt; 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>
412If your extension is valid,
413its icon appears next to the address bar,
414and information about the extension
415appears in the extensions page,
416as 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,
454try the instructions again,
455following them exactly.
456Don't try loading an HTML file that isn't in the extension's folder —
457it 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>
464Here 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>
484If 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&amp;feature=PlayList&amp;p=CA101D6A85FE9D4B&amp;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