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 fullsource code fromGitHub.

Next, create a new file in this directory calledmanifest.json. This JSON file describes the extension'scapabilities and configuration. For example, most manifest files contain an"action" key which declaresthe image Chrome should use as the extension's action icon and the HTML page to show in a popup when theextension'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 namedhello.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 testit 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 enteringchrome://extensions in a new tab. (By designchrome:// URLs are not linkable.)
    • Alternatively, click the Extensions menu puzzle button and selectManage Extensions at the bottom of the menu.
    • Or, click the Chrome menu, hover overMore Tools, then selectExtensions.
  2. Enable Developer Mode by clicking the toggle switch next toDeveloper mode.
  3. Click theLoad 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 inthe 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. Goto the Extensions page and click the refresh icon next to theon/off toggle:

Reload an extension

When to reload the extension

The following table shows which components need to be reloaded to see changes:

Extension componentRequires extension reload
The manifestYes
Service workerYes
Content scriptsYes (plus the host page)
The popupNo
Options pageNo
Other extension HTML pagesNo

Find console logs and errors

Console logs

During development, you can debug your code by accessing the browser console logs. In this case, wewill locate the logs for the popup. Start by adding a script tag tohello.html.

<html>  <body>    <h1>Hello Extensions</h1>    <script src="popup.js"></script>  </body></html>

Create apopup.js file and add the following code:

console.log("This is a popup!")

To see this message logged in the Console:

  1. Open the popup.
  2. Right-click the popup.
  3. SelectInspect.
    Inspecting the popup.
    Inspecting a popup.
  4. In theDevTools, navigate to theConsole panel.
    DevTools Code Panel
    Inspecting a popup

Error logs

Now let's break the extension. We can do so by removing the closing quote inpopup.js:

console.log("Thisisapopup!)// ❌ broken code

Go to the Extensions page and open the popup. AnErrors button will appear.

Extensions page with error button

Click theErrors button to learn more about the error:

Extension error details

To learn more about debugging the service worker, options page, and content scripts, seeDebuggingextensions.

Structure an extension project

There are many ways to structure an extension project; however, the only prerequisite is to place themanifest.json file in the extension's root directory as in following example:

The contents of an extension folder: manifest.json, background.js, scripts folder, popup folder, and images folder.

Use TypeScript

If you are developing using acode editor, you can use the npmpackagechrome-types to take advantage of auto-completion for theChromeAPI. This npm package is updated automatically when the Chromium source codechanges.

Key point: Update this npm package frequently to work with the latest Chromium version.

🚀 Ready to start building?

Choose any of the following tutorials to begin your extension learning journey.

ExtensionWhat you will learn
Run scripts on every pageTo insert an element on every page automatically.
Inject scripts into the active tabTo run code on the current page after clicking on the extension action.
Manage tabsTo create a popup that manages browser tabs.
Handle events with service workersHow an extension service worker handles events.

Except as otherwise noted, the content of this page is licensed under theCreative Commons Attribution 4.0 License, and code samples are licensed under theApache 2.0 License. For details, see theGoogle Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.

Last updated 2022-10-04 UTC.