Creating a Color Changer Chrome Extension

This tutorial will guide you through creating a Chrome extension that changes the background color of web pages and keeps track of how many times the color has been changed.

Step 1: Set Up the Folder Structure

First, create a new folder for your extension with the following structure:

my-extension/
│
├── manifest.json
├── background.js
├── popup/
│   ├── popup.html
│   └── popup.js
└── content_scripts/
    └── content.js

Step 2: Create the Manifest File

The manifest.json file is the heart of your Chrome extension. It tells Chrome about your extension, its capabilities, and the files it needs to function.

Create a file named manifest.json in the root of your extension folder with the following content:

{
  "manifest_version": 3,
  "name": "Color Changer",
  "version": "1.0",
  "description": "Changes webpage background color",
  "permissions": ["activeTab", "storage"],
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content_scripts/content.js"]
    }
  ],
  "action": {
    "default_popup": "popup/popup.html"
  }
}

Explanation:

manifest_version: Specifies we're using Manifest V3, the latest version for Chrome extensions.
permissions: Requests access to the active tab and storage API.
background: Specifies the background script file.
content_scripts: Defines which script should be injected into web pages.
action: Specifies the HTML file for the extension's popup.

Step 3: Create the Popup HTML

Create a file named popup.html in the popup folder:

<!DOCTYPE html>
<html>
<head>
  <title>Color Changer</title>
  <style>
    body {
      width: 200px;
      padding: 10px;
    }
    button {
      width: 100%;
      padding: 5px;
      margin-bottom: 10px;
    }
  </style>
</head>
<body>
  <button id="changeColor">Change Color</button>
  <p>Color changed <span id="count">0</span> times</p>
  <script src="popup.js"></script>
</body>
</html>

This creates a simple popup with a button and a counter. I've added some basic CSS to improve the layout.

Step 4: Create the Popup JavaScript

Create a file named popup.js in the popup folder:

document.addEventListener('DOMContentLoaded', function() {
  var changeColor = document.getElementById('changeColor');
  var countSpan = document.getElementById('count');

  // Load the current count
  chrome.storage.sync.get('colorCount', function(data) {
    countSpan.textContent = data.colorCount || 0;
  });

  changeColor.addEventListener('click', function() {
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
      chrome.tabs.sendMessage(tabs[0].id, {action: "changeColor"}, function(response) {
        console.log(response);
      });
    });

    // Increment the count
    chrome.storage.sync.get('colorCount', function(data) {
      var newCount = (data.colorCount || 0) + 1;
      chrome.storage.sync.set({colorCount: newCount});
      countSpan.textContent = newCount;
    });

    // Notify background script
    chrome.runtime.sendMessage({action: "colorChanged"});
  });
});

Explanation:

We wait for the DOM to load before attaching event listeners.
We retrieve the current color change count from storage and display it.

When the button is clicked, we:

Send a message to the content script to change the page color.
Increment the color change count and update it in storage and on the popup.
Send a message to the background script to log the change.

Step 5: Create the Background Script

Create a file named background.js in the root of your extension folder:

chrome.runtime.onInstalled.addListener(function() {
  chrome.storage.sync.set({colorCount: 0});
});

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    if (request.action === "colorChanged") {
      console.log("Background color was changed");
    }
  }
);

Explanation:

When the extension is installed, we initialize the color count to 0.
We listen for messages from other parts of the extension. When a "colorChanged" message is received, we log it to the console.

Step 6: Create the Content Script

Create a file named content.js in the content_scripts folder:

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    if (request.action === "changeColor") {
      document.body.style.backgroundColor = getRandomColor();
      sendResponse({status: "Color changed"});
    }
  }
);

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

Explanation:

This script listens for messages from the popup.
When it receives a "changeColor" message, it changes the page's background color to a random color.
The getRandomColor() function generates a random hex color code.

Step 7: Load and Test the Extension

Open Chrome and go to chrome://extensions/
Enable "Developer mode" in the top right corner.
Click "Load unpacked" and select your extension folder.
Your extension should now appear in the Chrome toolbar.
Open any webpage and click on your extension icon.
Click the "Change Color" button and observe:

The webpage's background color should change.
The count in the popup should increment.
Check the background script's console (in the extensions page) for the log message.

Simplest Chrome Extension Tutorial for 2024 Using Manifest V3

Creating a Color Changer Chrome Extension

Step 1: Set Up the Folder Structure

Step 2: Create the Manifest File

Step 3: Create the Popup HTML

Step 4: Create the Popup JavaScript

Step 5: Create the Background Script

Step 6: Create the Content Script

Step 7: Load and Test the Extension