How to Build a Chrome Extension in 2 Hours: Step-by-Step Tutorial

By CodeWritely Team·
chrome extensionjavascripttutorialweb development

Building a Chrome extension is easier than you think. In 2 hours, you’ll have a working extension published to the Chrome Web Store.

Prerequisites

Step 1: Create manifest.json

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

Step 2: Build the Popup

Create popup.html with your UI. Keep it simple — a button that does one thing well.

Step 3: Add Functionality

Use chrome.tabs, chrome.storage, and content scripts to interact with the browser. Start with manipulating the current page.

Step 4: Test Locally

Load unpacked extension at chrome://extensions. Test every feature. Fix bugs. Iterate.

Step 5: Publish

Create a Chrome Web Store developer account ($5 one-time fee). Upload your extension, write a description, add screenshots. Submit for review (1-3 days).

Disclosure: Some links are affiliate links.