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)