Simplest Chrome Extension Tutorial for 2024 Using Manifest V3
Published: 2024-07-14 00:41:51

## 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.