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.
paramName
( optional enumerated Type array of paramType )
Undocumented.
Description of this parameter from the json schema.
This parameter was added in version . You must omit this parameter in earlier versions, and you may omit it in any version. If you require this parameter, the manifest key minimum_chrome_version can ensure that your extension won't be run in an earlier browser version.
Parameters

Google Chrome Extensions (Labs)

Tutorial: Getting Started (Hello, World!)

Tutorial: Getting Started (Hello, World!)
true

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:

a window with a grid of images related to HELLO WORLD

You can develop extensions using any release of Google Chrome, on Windows, Mac, or Linux.

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.
  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 wrench icon and choosing Tools > 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 unpacked extension button. A file dialog appears.
    4. In the file dialog, navigate to your extension's folder 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:

a popup with a grid of images related to HELLO WORLD

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?

Here are some suggestions for what to read next:

  • The Overview, which has important conceptual and practical information
  • The debugging tutorial, which starts where this tutorial leaves off
  • The hosting page, which tells you about options for distributing your extension

If you don't feel like reading, try these: