DEV Community

Cover image for Building a Chrome Extension: Key Concepts Explained
AkK
AkK

Posted on

Building a Chrome Extension: Key Concepts Explained

#chromeextension #programming #beginners #learning

Creating a Chrome Extension may seem overwhelming at first — but once you understand its 3 main building blocks, it becomes much easier. Here's a quick breakdown of the core components:

✨ manifest.json
🔧 Content Script
🧠 Background Script

1️⃣ manifest.json – The Blueprint of Your Extension

This is the heart of your Chrome Extension. It tells Chrome everything it needs to know:

  • Name, version & description
  • What files it uses (scripts, icons, HTML)
  • Permissions needed (like tabs, storage, etc.)
  • Background behavior, UI elements, and more

📌 Why it matters: Chrome reads this file first to understand how your extension works.

🧾 Example:

{
  "manifest_version": 3,
  "name": "Simple Page Color Changer",
  "version": "1.0",
  "description": "Changes background color of any webpage.",
  "permissions": ["scripting", "tabs"],
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ],
  "action": {
    "default_popup": "popup.html",
    "default_icon": "icon.png"
  }
}
Enter fullscreen mode Exit fullscreen mode

2️⃣** Content Script – The Eyes & Hands of the Extension**
Content scripts are JS files that run inside the web pages you visit.

🔍 They can:

  • Access & manipulate HTML (DOM)
  • Style elements
  • React to user interaction on the page

🚫 They can’t:

  • Directly use Chrome APIs
  • Access browser features like tabs or bookmarks (they talk to the background script instead)

📄 Example – content.js

document.body.style.backgroundColor = "yellow";
Enter fullscreen mode Exit fullscreen mode

This would change the background color of any webpage to yellow.

3️⃣ Background Script – The Brain Behind the Scenes
The background script runs independently of any webpage.

🧠 It can:

  • Listen to browser events (like installation, tab updates)
  • Communicate with content scripts and popups
  • Handle global data and logic
  • In Manifest V3, it runs as a service worker — meaning it's event-based and more efficient.

💡 Example – background.js

chrome.runtime.onInstalled.addListener(() => {
  console.log("Extension installed!");
});
Enter fullscreen mode Exit fullscreen mode

🔁 Communication Between Scripts
Since content scripts and background scripts run in different environments, they talk using message passing.

➡️ From content to background:

chrome.runtime.sendMessage({ greeting: "hello" }, (response) => {
  console.log(response.reply);
});
Enter fullscreen mode Exit fullscreen mode

⬅️ From background to content:

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.greeting === "hello") {
    sendResponse({ reply: "hi there!" });
  }
});
Enter fullscreen mode Exit fullscreen mode

🧰 Optional But Useful Parts
🎯 popup.html – A small UI when the extension icon is clicked
⚙️ Options page – User settings & preferences
🖼️ Icons – Toolbar & branding visuals

Top comments (0)