How to Create Your First Chrome Extension: A Step-by-Step Guide

🧱 How to Create Your First Chrome Extension: A Step-by-Step Guide

Creating a Chrome extension is a great way to enhance your browsing experience and dive deeper into web development. This guide will help you build your very first Chrome extension from scratch.

❓ What is a Chrome Extension?

A Chrome extension is a small software program that customizes and enhances your browsing experience. It can modify web page behavior, add features, or even change the browser’s UI.

🧰 Prerequisites

Basic knowledge of HTML, CSS, and JavaScript
Google Chrome installed
A code editor like VS Code, Sublime, or Notepad

1️⃣ Step 1: Create Your Project Directory

Create a new folder for your extension
Name it something like my-first-extension

2️⃣ Step 2: Create the Manifest File

The manifest file describes your extension's metadata and configuration.

Create a file called manifest.json in your folder and add:

{
  "manifest_version": 3,
  "name": "My First Extension",
  "version": "1.0",
  "description": "A simple Chrome extension.",
  "action": {
    "default_popup": "popup.html"
  }
}

This is the UI displayed when users click your extension icon.

Create popup.html:

<!DOCTYPE html>
<html>
  <head>
    <title>My First Chrome Extension</title>
  </head>
  <body>
    <h1>Hello, Chrome Extension!</h1>
    <button id="changeColor">Change Color</button>
    <script src="popup.js"></script>
  </body>
</html>

4️⃣ Step 4: Add Functionality with JavaScript

Create popup.js:

document.addEventListener('DOMContentLoaded', function() {
  var changeColorButton = document.getElementById('changeColor');
  changeColorButton.addEventListener('click', function() {
    document.body.style.backgroundColor = getRandomColor();
  });
});

function getRandomColor() {
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

Clicking the button will change the background color randomly.

5️⃣ Step 5: Load Your Extension in Chrome

Open Chrome and go to chrome://extensions/
Enable Developer mode (top-right corner)
Click Load unpacked and select your project folder

Your extension is now live and clickable from the toolbar!

🚀 Next Steps

Explore more advanced topics:

Background scripts for persistent tasks
Content scripts to interact with pages
Use chrome.storage for saving data
Make external API calls
Add an options page for user configuration

✅ Conclusion

You’ve successfully built your first Chrome extension!

With these fundamentals, you can now explore the world of browser extensions. Continue experimenting, and refer to the Chrome Extension documentation for deeper insights.

Happy coding from the Mellowtel Team! 🎉

How to Create Your First Chrome Extension: A Step-by-Step Guide