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.
Top comments (0)