chrome/common/extensions/docs/static/getstarted.html

<div id="pageData-name" class="pageData">Tutorial: Getting Started (Hello, World!)</div>
<div id="pageData-showTOC" class="pageData">true</div>

<p>
This tutorial walks you through creating a simple extension.
You'll add an icon to Google Chrome
that, when clicked, displays an automatically generated page.
The icon and page will look something like this:
</p>

<img src="images/hello-world-small.png"
  width="300" height="221"
  alt="a window with a grid of images related to HELLO WORLD" />


<h2 id="browser">Get your browser ready</h2>

<p>To develop extensions for Google Chrome,
you need to <a href="http://dev.chromium.org/getting-involved/dev-channel">subscribe
to the Dev Channel</a> of Google Chrome. Extensions aren't yet available in the beta or stable channels (but we're working hard on that!).
</p>

<h2 id="load">Create and load an extension</h2>
<p>
In this section, you'll write an extension
that adds a <em>browser action</em>
to the toolbar of Google Chrome.
</p>

<ol>
  <li>
    Create a folder somewhere on your computer to contain your extension's code.
  </li>
  <li>
    Inside your extension's folder,
    create a text file called <strong><code>manifest.json</code></strong>,
    and put this in it:
<pre>{
  "name": "My First Extension",
  "version": "1.0",
  "description": "The first extension that I made.",
  "browser_action": {
    "default_icon": "icon.png"
  },
  "permissions": [
    "http://api.flickr.com/"
  ]
}</pre>
  </li>
  <li>
    Copy this icon to the same folder:<br>
    <table cellpadding="0" cellspacing="0" style="border:0">
      <tr>
        <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>
          <a href="examples/tutorials/getstarted/icon.png"
            >Download icon.png</a></td>
      </tr>
    </table>
  </li>
  <li id="load-ext"> Load the extension.
    <ol type="a">
      <li>
      Bring up the extensions management page
      by clicking the Tools menu
      <img src="images/toolsmenu.gif" width="43" height="34" alt=""
           align="absmiddle" style="margin:0; padding:0">and
      choosing <b>Extensions</b>.
      </li>

      <li>
      If <b>Developer mode</b> has a + by it,
      click the + to add developer information to the page.
      The + changes to a -,
      and more buttons and information appear.
      </li>

      <li>
      Click the <b>Load unpacked extension</b> button.
      A file dialog appears.
      </li>

      <li>
      In the file dialog,
      navigate to your extension's folder
      and click <b>OK</b>.
      </li>
    </ol> </li>
  </ol>

<p>
If your extension is valid,
its icon appears next to the address bar,
and information about the extension
appears in the extensions page,
as the following screenshot shows.
</p>

<p>
<a href="images/load_after.png"><img
  src="images/load_after_small.png"
  width="300" height="132" /></a>
</p>

<h2 id="code">Add code to the extension</h2>
<p> In this step, you'll make your extension <em>do</em> something besides just look good. </p>
<ol>
  <li>
    <p> Edit <code>manifest.json</code> to add the following line:</p>
<pre>
  ...
  "browser_action": {
    "default_icon": "icon.png"<b>,
    "popup": "popup.html"</b>
  },
  ...
</pre>
    <p> Inside your extension's folder,
    create a text file called <strong><code>popup.html</code></strong>,
    and add the following code to it:</p>
    <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
    and JavaScript code for hello_world</a></blockquote>
  </li>
  <li>
    Return to the extensions management page,
    and click the <b>Reload</b> button
    to load the new version of the extension.</li>
  <li>Click the extension's icon.
  A popup should appear that displays the contents of
  <code>popup.html</code>. </li>
</ol>
<p> It should look something like this:</p>

<img src="images/hello-world.png"
  width="500" height="369"
  alt="a popup with a grid of images related to HELLO WORLD" />

<p> If you don't see the popup,
try the instructions again,
following them exactly.
Don't try loading an HTML file that isn't in the extension's folder &mdash;
it won't work! </p>

<h2 id="summary">Now what?</h2>

<!-- [PENDING: Summarize what we did, what it means, what else we would've done if this were a real extension (e.g. package it), and where to find more information.] -->

<p>
Here are some suggestions for what to do next:
</p>

<ul>
  <li>
    Read the <a href="overview.html">Overview</a>
  </li>
  <li>
    Learn how to debug extensions by following the
    <a href="tut_debugging.html">debugging tutorial</a>
  </li>
  <li>
    Keep up to date with the latest news by subscribing to
    <a href="http://groups.google.com/group/chromium-extensions/subscribe">chromium-extensions</a>
  </li>
  <li>
    Learn more about
    <a href="browserAction.html">browser actions</a>
  </li>
  <li>
    Look at some
    <a href="samples.html">sample extensions</a>
  </li>
</ul>