This content originally appeared on DEV Community and was authored by AkK
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"
}
}
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";
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!");
});
🔁 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);
});
⬅️ From background to content:
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
if (request.greeting === "hello") {
sendResponse({ reply: "hi there!" });
}
});
🧰 Optional But Useful Parts
🎯 popup.html – A small UI when the extension icon is clicked
⚙️ Options page – User settings & preferences
🖼️ Icons – Toolbar & branding visuals
This content originally appeared on DEV Community and was authored by AkK
AkK | Sciencx (2025-04-15T19:08:44+00:00) Building a Chrome Extension: Key Concepts Explained. Retrieved from https://www.scien.cx/2025/04/15/building-a-chrome-extension-key-concepts-explained/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.