GJ

Blog Build your first Chrome extension with Manifest V3

Build your first Chrome extension with Manifest V3

2 min read

Build your first Chrome extension with Manifest V3
TL;DR A Chrome extension is a small web project with a manifest.json that tells Chrome what it does. Start with a manifest, a popup, and maybe a content script, load it unpacked from chrome://extensions, and iterate. You can have something working in under an hour.

Chrome extensions look intimidating from the outside. They are not. An extension is a folder of web files plus one config file that tells the browser what the files are for. If you can build a small web page, you can build an extension.

Here is the shortest path to a working one on Manifest V3.

The one file that matters: manifest.json

Every extension has a manifest.json. It names the extension, sets the version, and declares its pieces. A minimal one looks like this.

{
  "manifest_version": 3,
  "name": "My First Extension",
  "version": "1.0.0",
  "action": { "default_popup": "popup.html" }
}

That alone gives you a toolbar button that opens a popup.

Add a popup

The popup is just an HTML file. Make popup.html:

<!doctype html>
<html>
  <body style="width: 220px; font-family: sans-serif; padding: 12px">
    <h1 style="font-size: 15px">Hello</h1>
    <button id="go">Highlight this page</button>
    <script src="popup.js"></script>
  </body>
</html>

Do something to the page

To touch the current tab, you inject a script. In popup.js:

document.getElementById("go").addEventListener("click", async () => {
  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  await chrome.scripting.executeScript({
    target: { tabId: tab.id },
    func: () => {
      document.body.style.outline = "4px solid #5eead4";
    },
  });
});

For chrome.scripting to work, add permissions to the manifest:

"permissions": ["scripting", "activeTab"]

Load it and try it

Open chrome://extensions, turn on Developer mode, click Load unpacked, and select your folder. The button appears in the toolbar. Click it, hit the popup button, and the page gets a teal outline.

That loop, edit and reload, is your whole workflow while building.

Where to go next

Once the basics click, the interesting parts open up.

  • Content scripts run automatically on pages you specify, so you can change a site without the user clicking anything.
  • A service worker handles background events, like reacting to a tab change or a keyboard shortcut.
  • Storage lets you save settings with chrome.storage.

Keep permissions tight. Ask only for what the feature needs, because reviewers and users both notice an extension that wants the whole browser. Build something small that solves one annoyance of your own, and you will learn faster than any tutorial can teach.

FAQ

What is the difference between Manifest V2 and V3?

V3 is the current standard. The biggest change is that background pages became service workers, which spin up on demand instead of running all the time, and network request blocking moved to a declarative API. New extensions should target V3, since V2 is being retired.

Do I need to publish to test an extension?

No. Go to chrome://extensions, turn on Developer mode, and use Load unpacked to point Chrome at your project folder. It runs locally with no review. You only publish when you want to share it.

What is a content script?

A content script is JavaScript that runs in the context of a web page the user visits. It can read and change that page's DOM. It is how extensions modify sites, for example highlighting text or adding a button.