chrome/common/extensions/docs/templates/articles/getstarted.html

<h1>Tutorial: Getting Started (Hello, World!)</h1>


<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="{{static}}/images/hello-world-small.png"
     width="300"
     height="221"
     alt="a window with a grid of images related to 'Hello World'">

<p>
  You can develop extensions using any release of Google Chrome, on Windows,
  Mac, or Linux. Extensions you develop on one platform should run without
  change on every platform Chrome supports.
</p>

<h2 id="load">Create and load an extension</h2>

<p>
  The extension we'll walk through creating here is a
  <a href="browserAction.html">Browser Action</a>, which adds a button to
  Chrome's toolbar whose behavior you can control.
</p>

<ol>
  <li>
    Create a folder somewhere on your computer to contain your extension's code.
  </li>
  <li>
    <p>
      Inside your extension's folder, create a text file called
      <strong><code>manifest.json</code></strong>, and fill it with the
      following code:
    </p>
    <pre>{
  "name": "My First Extension",
  "version": "1.0",
  "manifest_version": 2,
  "description": "The first extension that I made.",
  "browser_action": {
    "default_icon": "icon.png"
  },
  "permissions": [
    "http://api.flickr.com/"
  ]
}</pre>
  </li>
  <li>
    <p>Copy this icon to the same folder:</p>
    <div style="width: 150px; text-align: center;">
      <a href='../examples/tutorials/getstarted/icon.png'
         download='icon'>
        <img src='../examples/tutorials/getstarted/icon.png'
             width='19'
             height='19'
             alt=''
             style='display: block; margin: 0.25em auto;'>
        Download icon.png
      </a>
    </div>
  </li>
  <li id="load-ext">
    <p>Load the extension.</p>
    <ol type="a">
      <li style="margin-top:0" />
      Bring up the extensions management page
      by clicking the wrench icon
      <img src="{{static}}/images/toolsmenu.gif" width="29" height="29" alt=""
        style="margin-top:0" />
      and choosing <b>Tools > 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="{{static}}/images/load_after.png"><img
  src="{{static}}/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>,
    "default_popup": "popup.html"</b>
  },
  ...</pre>

    <p>
      Inside your extension's folder, create two text files called
      <strong><code>popup.html</code></strong> and
      <strong><code>popup.js</code></strong>. Add the following code to
      these files:
    </p>
    <blockquote>
      <a href="../examples/tutorials/getstarted/popup.html"
    target="_blank">HTML code (popup.html)</a> and
    <a href="../examples/tutorials/getstarted/popup.js"
    target="_blank">JavaScript code (popup.js)</a> 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="{{static}}/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>



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

<ul>
  <li>
    The <a href="overview.html">Overview</a>,
    which has important conceptual and practical information
  </li>
  <li>
    The
    <a href="tut_debugging.html">debugging tutorial</a>,
    which starts where this tutorial leaves off
  </li>
  <li>
    The <a href="hosting.html">hosting</a> page,
    which tells you about options for distributing your extension
  </li>
</ul>

<p>
If you don't feel like reading, try these:
</p>
<ul>
  <li>
    Keep up to date with the latest news:
    <a href="http://groups.google.com/a/chromium.org/group/chromium-extensions/subscribe">subscribe to chromium-extensions</a>
  </li>
  <li>
    Ask a question tagged [google-chrome-extension] on
    <a href="http://stackoverflow.com/questions/tagged/google-chrome-extension">Stack Overflow</a>
  </li>
  <li>
    Look at some
    <a href="samples.html">sample extensions</a>
  </li>
  <li>
    Watch some
    <a href="http://www.youtube.com/view_play_list?p=CA101D6A85FE9D4B">videos</a>, such as
    <a href="http://www.youtube.com/watch?v=e3McMaHvlBY&feature=PlayList&p=CA101D6A85FE9D4B&index=3">How to build an extension</a>
  </li>
</ul>