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> http://popup.js
</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.