Tutorial: Getting Started (Hello, World!)

Contents

1. Get your browser ready
   1. h3Name
2. Create and load an extension
   1. h3Name
3. Add code to the extension
   1. h3Name
4. Now what?
   1. h3Name
API reference
1. Properties
   1. propertyName
2. Methods
   1. methodName
3. Events
   1. eventName
4. Types
   1. id

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:

Get your browser ready

To develop extensions for Google Chrome, you need to subscribe to the Dev or Beta channel of Google Chrome for Windows. Extensions aren't yet available in the stable channel.

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 an extension that adds a browser action to the toolbar of Google Chrome.

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.",
     "browser_action": {
       "default_icon": "icon.png"
     },
     "permissions": [
       "http://api.flickr.com/"
     ]
   }

3. Copy this icon to the same folder:
   

   Download icon.png

4. Load the extension.
   1. Bring up the extensions management page by clicking the Tools menu and choosing Extensions.
   2. If Developer mode has a + by it, click the + to add developer information to the page. The + changes to a -, and more buttons and information appear.
   3. Click the Load extension... button. A file dialog appears.
   4. In the file dialog, navigate to your extension's folder (c:\myext, for example) and click OK.

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.

Add code to the extension

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

1. Edit manifest.json to add the following line:

     ...
     "browser_action": {
       "default_icon": "icon.png",
       "popup": "popup.html"
     },
     ...
   

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

   CSS and JavaScript code for hello_world

2. Return to the extensions management page, and click the Reload button to load the new version of the extension.
3. Click the extension's icon. A popup should appear that displays the contents of popup.html.

It should look something like this:

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

Here are some suggestions for what to do next:

• Read the Overview
• Learn how to debug extensions by following the debugging tutorial
• Keep up to date with the latest news by subscribing to chromium-extensions
• Learn more about browser actions
• Look at some sample extensions