How to Create A Chrome Extension in HTML CSS & JavaScript
Creating a Chrome extension can be a useful learning project, as it allows you to develop your skills in web development and get a better understanding of how Chrome extensions really work. While the idea of creating an extension may seem complex at first, the process becomes much simpler once you understand the basic structure. Chrome extensions are small programs that can customize and enhance the browser’s functionality. They are built using web technologies such as HTML, CSS, and JavaScript, and they can be easily installed from the Chrome Web Store.
Creating a Chrome extension using HTML, CSS, and JavaScript involves several steps. Below is a guide to help you build a simple Chrome extension that modifies the background color of a webpage when a button is clicked.
Step 1: Set Up Your Project Directory
Create a new folder for your Chrome extension project. Inside this folder, create the following files:
manifest.jsonpopup.htmlpopup.csspopup.jsbackground.js(optional, for background scripts)
Step 2: Create the Manifest File
The manifest.json file is crucial as it contains metadata about your extension. Here’s an example of what it should look like:
{
"manifest_version": 3,
"name": "Change Background Color",
"version": "1.0",
"description": "A simple Chrome extension to change the background color of a page",
"action": {
"default_popup": "popup.html",
"default_icon": {
"16": "icon16.png",
"48": "icon48.png",
"128": "icon128.png"
}
},
"permissions": [
"activeTab",
"scripting"
]
}Step 3: Create the Popup HTML
The popup.html file defines the UI of your extension’s popup window:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Change Background Color</title>
<link rel="stylesheet" href="popup.css">
</head>
<body>
<h1>Change Background</h1>
<button id="changeColor">Change Color</button>
<script src="popup.js"></script>
</body>
</html>Step 4: Style the Popup
The popup.css file contains the styling for your popup:
body {
font-family: Arial, sans-serif;
width: 200px;
padding: 20px;
}
h1 {
font-size: 18px;
margin-bottom: 10px;
}
button {
padding: 10px;
font-size: 14px;
cursor: pointer;
}Step 5: Add JavaScript Functionality
The popup.js file contains the logic to change the background color:
document.getElementById('changeColor').addEventListener('click', () => {
chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
chrome.scripting.executeScript({
target: { tabId: tabs[0].id },
function: changeBackgroundColor
});
});
});
function changeBackgroundColor() {
document.body.style.backgroundColor = '#'+Math.floor(Math.random()*16777215).toString(16);
}Step 6: Add Icons
Create icons for your extension in the sizes specified in the manifest.json file (16x16, 48x48, 128x128). Name them icon16.png, icon48.png, and icon128.png and place them in the project folder.
Step 7: Load the Extension into Chrome
- Open Chrome and navigate to
chrome://extensions/. - Enable “Developer mode” by toggling the switch in the top right corner.
- Click on “Load unpacked” and select your project folder.
Your extension should now appear in the list of installed extensions. Click on the extension’s icon in the toolbar to open the popup and test the functionality by clicking the “Change Color” button.
Summary
You’ve created a simple Chrome extension that changes the background color of the current webpage. This example uses essential components like the manifest file, popup HTML, CSS for styling, and JavaScript for functionality.
