Create a Chrome Extension that can change the Webpage background color
I am sure you must have thought about how to create a chrome extension at least once. In this article, I will show you how you can create a Chrome extension with simple steps.
This chrome extension will be able to change the background color of the webpage.
Development
Create a new directory for your extension and create the following files:
manifest.json: This file specifies metadata about your extension, such as its name and which permissions it needs.
{
"manifest_version": 2,
"name": "Webpage Color Changer",
"version": "1.0",
"permissions": ["activeTab"],
"browser_action": {
"default_icon": "icon.png",
"default_title": "Change the webpage color",
"default_popup": "popup.html"
}
}popup.html: This file contains the HTML for the popup window that appears when the extension button is clicked. It should include a button that, when clicked, will change the webpage color.
<!DOCTYPE html>
<html>
<head>
<style>
button {
height: 30px;
width: 30px;
outline: none;
border: none;
background: none;
cursor: pointer;
}
</style>
</head>
<body>
<button id="change-color-button">Change Color</button>
<script src="popup.js"></script>
</body>
</html>popup.js: This file contains the JavaScript code that runs when the popup window is opened. It should listen for a click on the "Change Color" button and send a message to the content script (content.js) to change the webpage color when the button is clicked.
document.addEventListener("DOMContentLoaded", () => {
const button = document.getElementById("change-color-button");
button.addEventListener("click", () => {
chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
chrome.tabs.sendMessage(tabs[0].id, { type: "change-color" });
});
});
});content.js: This file is a content script that runs in the context of the webpage and listens for messages from the extension. When it receives a message to change the webpage color, it will execute the necessary code to do so.
chrome.runtime.onMessage.addListener((message) => {
if (message.type === "change-color") {
document.body.style.backgroundColor = "red";
}
});Loading into Chrome
To load the extension in Chrome, open the extensions management page by going to chrome://extensions the address bar. Enable "Developer mode" by clicking the toggle switch in the top right corner of the page. Then click the "Load unpacked" button and select the directory that contains your extension files.
That’s it! Now when you click the extension button in the toolbar, the popup window will appear and you can click the “Change Color” button to change the webpage color of the active tab. You can customize the extension by changing the HTML and CSS in popup.html
Publishing extension
To publish your Chrome extension, follow these steps:
- Go to the Chrome Developer Dashboard (https://chrome.google.com/webstore/developer/dashboard) and sign in with your Google account.
- Click the “Add new item” button.
- Drag and drop your extension’s ZIP file or select it from your computer. The ZIP file should contain all of the extension’s files, including the
manifest.jsonfile. - Fill out the form to provide information about your extensions, such as name, description, and promotional images.
- Accept the developer agreement and click the “Publish” button.
Your extension will be reviewed by the Chrome team and, if approved, it will be published to the Chrome Web Store. You can view the status of your extension and make updates to it at any time through the Developer Dashboard.
