Hello World extension

Learn the basics of Chrome extension development by building your first Hello World extension.

Overview

You will create a "Hello World" example, load the extension locally, locate logs, and explore other recommendations.

Hello World

This extension will display “Hello Extensions” when the user clicks the extension toolbar icon.

Hello extension
Hello Extension popup

Start by creating a new directory to store your extension files. If you prefer, you can download the full source code from GitHub.

Next, create a new file in this directory called manifest.json. This JSON file describes the extension's capabilities and configuration. For example, most manifest files contain an "action" key which declares the image Chrome should use as the extension's action icon and the HTML page to show in a popup when the extension's action icon is clicked.

{
  "name": "Hello Extensions",
  "description": "Base Level Extension",
  "version": "1.0",
  "manifest_version": 3,
  "action": {
    "default_popup": "hello.html",
    "default_icon": "hello_extensions.png"
  }
}

Download the icon to your directory, and be sure to change its name to match what's in the "default_icon" key.

For the popup, create a file named hello.html, and add the following code:

<html>
  <body>
    <h1>Hello Extensions</h1>
  </body>
</html>

The extension now displays a popup when the extension's action icon (toolbar icon) is clicked. You can test it in Chrome by loading it locally. Ensure all files are saved.

Load an unpacked extension

To load an unpacked extension in developer mode:

  1. Go to the Extensions page by entering chrome://extensions in a new tab. (By design chrome:// URLs are not linkable.)
    • Alternatively, click the Extensions menu puzzle button and select Manage Extensions at the bottom of the menu.
    • Or, click the Chrome menu, hover over More Tools, then select Extensions.
  2. Enable Developer Mode by clicking the toggle switch next to Developer mode.
  3. Click the Load unpacked button and select the extension directory.
    Extensions page
    Extensions page (chrome://extensions)

Ta-da! The extension has been successfully installed. If no extension icons were included in the manifest, a generic icon will be created for the extension.

Pin the extension

By default, when you load your extension locally, it will appear in the extensions menu (Puzzle). Pin your extension to the toolbar to quickly access your extension during development.

Pinning the extension
Pinning the extension

Click the extension's action icon (toolbar icon); you should see a popup.

hello world extension
Hello World extension

Reload the extension

Go back to the code and change the name of the extension to "Hello Extensions of the world!" in the manifest.

{
  "manifest_version": 3,
  "name": "Hello Extensions of the world!",
  ...
}

After saving the file, to see this change in the browser you also have to refresh the extension. Go to the Extensions page and click the refresh icon next to the on/off toggle:

Reload an extension

When to reload the extension