0Pricing
Browser Extensions Development (Chrome & Edge) · Lesson

Anatomy of an Extension Project

Tour the standard files and folders that make up a Manifest V3 browser extension and what each one does.

Anatomy of an Extension Project is a free Browser Extensions Development (Chrome & Edge) lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Browser Extensions Development (Chrome & Edge) learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Extensions Are Just Web Files

An extension is just a bundle of HTML, CSS, JavaScript, and a config file, which the browser loads in a special, extra-capable context.

The manifest.json Heart

Every extension needs a manifest.json at its root — it declares name, version, permissions, and scripts. Without it, the browser ignores the folder.

{
  "manifest_version": 3,
  "name": "My Extension",
  "version": "1.0.0"
}

A Typical Folder Structure

Layout is flexible, but a clean folder structure stays maintainable: manifest at root, plus popup, background, content, and icons folders.

The Background Service Worker

In Manifest V3, background logic runs as a service worker. It handles events even with no UI open, but unloads when idle to save memory.

{
  "background": {
    "service_worker": "background.js"
  }
}

The Popup Action

The action defines the toolbar button and the popup it opens — itself just a tiny HTML page. The config below shows both fields.

{
  "action": {
    "default_popup": "popup/popup.html",
    "default_title": "Open My Extension"
  }
}

Content Scripts

Content scripts run inside web pages so your extension can read and modify the DOM. You scope them with URL match patterns.

{
  "content_scripts": [{
    "matches": ["https://*.example.com/*"],
    "js": ["content/main.js"]
  }]
}

Icons in Multiple Sizes

Provide your icon in several sizes — browsers show it in different places at different resolutions, so it stays crisp everywhere.

{
  "icons": {
    "16": "icons/icon16.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  }
}

Declaring Permissions

The permissions array lists the browser APIs you need, like storage or tabs. Request only what you actually use.

{
  "permissions": ["storage", "activeTab"]
}

Web-Accessible Resources

If a web page must load a file packaged in your extension, list it under web_accessible_resources — otherwise the browser blocks access.

{
  "web_accessible_resources": [{
    "resources": ["images/logo.png"],
    "matches": ["https://*.example.com/*"]
  }]
}

How Pieces Communicate

Popup, content scripts, and service worker live in separate contexts, so they talk via the messaging API, not shared variables.

chrome.runtime.sendMessage({ type: 'PING' })

Keeping It Organized

As it grows, group related files into folders and keep manifest.json lean. A predictable layout makes debugging and store review easier.

Quick Check

Check what you remember about extension structure.

Recap

You toured the building blocks: manifest.json declares all, a service worker runs background, the action drives the popup, content scripts touch pages.

Frequently asked questions

Is the “Anatomy of an Extension Project” lesson free?

Yes — the full text of “Anatomy of an Extension Project” is free to read here on the web, and the Browser Extensions Development (Chrome & Edge) course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Browser Extensions Development (Chrome & Edge) course, upgrade to CoddyKit PRO.

What will I learn in “Anatomy of an Extension Project”?

Tour the standard files and folders that make up a Manifest V3 browser extension and what each one does. You practise Browser Extensions Development (Chrome & Edge) with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Browser Extensions Development (Chrome & Edge)?

No prior experience is required. Browser Extensions Development (Chrome & Edge) on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Anatomy of an Extension Project” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Browser Extensions Development (Chrome & Edge) lesson?

Yes. Every Browser Extensions Development (Chrome & Edge) lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. What are Browser Extensions?
  2. Setting Up Development Environment
  3. Your First 'Hello World' Extension
  4. Anatomy of an Extension Project
← Back to Browser Extensions Development (Chrome & Edge)