Tutorial: Getting Started (Hello, World!)
true

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

a window with a grid of images related to HELLO WORLD

[PENDING: rewrite the example to use a browser action instead of a toolstrip]

Get your browser ready

To develop extensions for Google Chrome, you need to subscribe to the dev channel of Google Chrome for Windows.

Note: This tutorial requires Windows. You can try it on Linux and OS X, and it might work, but the extensions support is less stable on those platforms. We're working hard to bring them up to speed.

Create and load an extension

In this section, you'll write a toolstrip — an extension that puts a bit of UI into the toolbar at the bottom of the Google Chrome window.

  1. Create a folder somewhere on your computer to contain your extension's code. We'll assume the folder is located at c:\myext, but it can be anywhere.
  2. Inside your extension's folder, create a text file called manifest.json, and put this in it: 
    {
  "name": "My First Extension",
  "version": "1.0",
  "description": "The first extension that I made.",
  "toolstrips": [
    "my_toolstrip.html"
  ],
  "permissions": [
    "http://api.flickr.com/"
  ]
}
  3. In the same folder, create a text file called my_toolstrip.html, and put this in it: 
    <div class="toolstrip-button">
  <span>Hello, World!</span>
</div>
  4. Load the extension.
    1. Bring up the Extensions management page by going to this URL:
      chrome://extensions
    2. Click the Load unpacked extension button. A file dialog appears.
    3. In the file dialog, navigate to your extension's folder (c:\myext, for example) and click the OK button.

If your extension is valid, information about it appears in the Installed extensions part of the Extensions page, as the following screenshot shows.

You should see the UI for your extension at the bottom left of the browser, looking something like this:

default appearance initial onhover appearance final onhover appearance

Your extension's button is automatically styled to look like it belongs in the browser. If you put the cursor over the button, the button gets a nice, rounded edge, just like the buttons in the bookmark bar. After a while, a tooltip comes up, identifying the extension.

[PENDING: troubleshooting info should go here. what are symptoms of common typos, including misnamed files? what are the symptoms if you don't have the dev channel?]

Add code to the extension

In this step, you'll make your extension do something besides just look good.

  1. Inside your extension's folder, create a text file called hello_world.html, and add the following code to it:

    CSS and JavaScript code for hello_world

  2. Edit my_toolstrip.html, so that it has the following code: 

    <div class="toolstrip-button" onclick="window.open('hello_world.html')">
  <span>Hello, World!</span>
</div>
  3. Return to chrome://extensions, and click the Reload button to load the new version of the extension.
  4. Click the button. A window should come up that displays hello_world.html.

It should look something like this:

a window with a grid of images related to HELLO WORLD

If you don't see that page, try the instructions again, following them exactly. Don't try loading an HTML file that isn't in the extension's folder — it won't work!

Now what?

[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.]