How to Build a Chrome Extension in 10 Minutes

🚀 Want to build your first Chrome extension but don’t know where to start?

Google Chrome extensions are powerful tools that enhance browsing experiences, automate tasks, and improve productivity. The good news? You can build your own Chrome extension in just 10 minutes!

In this guide, we’ll walk through creating a simple Chrome extension that changes the background color of any webpage. You don’t need advanced coding skills—just basic HTML, CSS, and JavaScript.

🛠️ Step 1: Set Up Your Project Folder

Create a new folder for your extension, e.g., my-first-extension. Inside this folder, create the following files:

manifest.json (Configuration file)
popup.html (User interface)
popup.js (Functionality)
styles.css (Styling)
icon.png (Your extension icon, 128×128 px)

📜 Step 2: Create the Manifest File

The manifest.json file tells Chrome about your extension.

Create a new file named manifest.json and add this code:

jsonCopierModifier{
  "manifest_version": 3,
  "name": "Color Changer",
  "version": "1.0",
  "description": "A simple Chrome extension to change background color",
  "permissions": ["activeTab"],
  "action": {
    "default_popup": "popup.html",
    "default_icon": "icon.png"
  }
}

🔹 Explanation:

manifest_version: 3 → Uses the latest Chrome extension format.
name, version, description → Basic extension details.
permissions: ["activeTab"] → Allows interaction with the active tab.
action → Defines the popup UI (popup.html) and extension icon (icon.png).

📌 Step 3: Create the Popup Interface (popup.html)

Now, let’s create the popup.html file:

htmlCopierModifier<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Color Changer</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h2>Pick a Background Color</h2>
  <button id="changeColor">Change Background</button>
  <script src="popup.js"></script>
</body>
</html>

🎨 Step 4: Add Some Styling (styles.css)

Create styles.css and add:

cssCopierModifierbody {
  font-family: Arial, sans-serif;
  text-align: center;
  padding: 10px;
}

button {
  background-color: #007BFF;
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

⚡ Step 5: Add JavaScript to Change Background Color (popup.js)

Now, create popup.js to handle button clicks:

jsCopierModifierdocument.getElementById("changeColor").addEventListener("click", () => {
  chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
    chrome.scripting.executeScript({
      target: { tabId: tabs[0].id },
      function: changeBgColor,
    });
  });
});

function changeBgColor() {
  document.body.style.backgroundColor = "#ffcc00"; // Yellow
}

🚀 Step 6: Load Your Extension in Chrome

Now that you have all files ready, let’s test it!

1️⃣ Open Google Chrome and go to chrome://extensions/
2️⃣ Enable Developer Mode (top-right corner).
3️⃣ Click Load Unpacked, select your extension folder, and hit Open.
4️⃣ Your extension will appear in the toolbar. Click it and test!

🎉 Congratulations! You just built a working Chrome extension in under 10 minutes.

📢 Final Thoughts

This was a basic Chrome extension to get started.
You can add more features like changing colors dynamically.
Experiment with content scripts and APIs for advanced functionality.

💡 What do you want to build next? Let me know in the comments!