How to create Chrome Extension in HTML, CSS and JavaScript
Hi to all, in this article I am going to tell you all about how to create chrome extension in HTML, CSS and JavaScript easily in just few minutes.
So, read this article carefully and completely to get clear understanding about creating chrome extension by using simple codes.
Mainly creating chrome extension is a useful learning and it will allows you to practice your skills in the web development and to get a better understanding of how chrome extensions work and the idea to create an extension may seems complex at first time, the process becomes much easier once you understand the basic structure.
Basically chrome extensions are a small programs that can be customize and enhanced by the browsers functionality and they are built using web technologies such as HTML, CSS, and JavaScript and they can be easily installed from the chrome web store.
In this article I will provide you the process of creating a color picker chrome extension.
Steps to create Chrome Extension
Here we will create a color picker chrome extension by using HTML, CSS, and JavaScript and to create it, you should follow few steps which are given below:
Creating the Project
First of all you need to create a new directory and name the directory in any code editor and here I am using Visual studio code to create and modify code and you can use your own code editor.
Now you need to create a files under the director i.e. index.html, style.css, and script.js files and inside these files we will add the codes accordingly.
Adding HTML Code
Here we will design the user interface of the color picker extension by using HTML and you need to add the following HTML code inside the index.html file and save it.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js" defer></script>
</head>
<body>
<div class="popup">
<div class="picker">
<button id="color-picker">Pick Color</button>
</div>
<div class="picked-colors hide">
<header>
<p class="title">Picked colors</p>
<span class="clear-all">Clear All</span>
</header>
<ul class="all-colors"></ul>
</div>
</div>
</body>
</html>
Adding CSS Code
Now you need to open style.css file and add the following CSS code to add styles and make the extension visually attractive.
If you want to change the size, color, font then you can modify this CSS code and change according to your requirements.
/* Import Google font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:[email protected];500;600&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
.popup {
width: 350px;
background: #fff;
}
.popup :where(.picker, header, .all-colors) {
display: flex;
align-items: center;
}
.popup .picker {
padding: 30px 0;
background: #E3F2FD;
justify-content: center;
}
.picker #color-picker {
border: none;
outline: none;
color: #fff;
font-size: 1rem;
cursor: pointer;
padding: 10px 20px;
border-radius: 5px;
background: #5372F0;
transition: 0.3s ease;
}
#color-picker:hover {
background: #2c52ed;
}
.picked-colors {
margin: 10px 15px;
}
.picked-colors header {
justify-content: space-between;
}
header .title {
font-size: 1rem;
}
header .clear-all {
cursor: pointer;
font-size: 0.9rem;
color: #5372F0;
}
header .clear-all:hover {
color: #143feb;
}
.picked-colors.hide {
display: none;
}
.picked-colors .all-colors {
flex-wrap: wrap;
list-style: none;
margin: 10px 0 15px;
}
.all-colors .color {
display: flex;
cursor: pointer;
margin-bottom: 10px;
width: calc(100% / 3);
}
.all-colors .rect {
height: 21px;
width: 21px;
display: block;
margin-right: 8px;
border-radius: 5px;
}
.all-colors .color span {
font-size: 0.96rem;
font-weight: 500;
text-transform: uppercase;
font-family: "Open sans";
}
Adding JavaScript Code
Now you need to open script.js file and add the following JavaScript code to add full functionality to the color picker extension.
const colorPickerBtn = document.querySelector("#color-picker");
const clearAll = document.querySelector(".clear-all");
const colorList = document.querySelector(".all-colors");
const pickedColors = JSON.parse(localStorage.getItem("picked-colors") || "[]");
// Copying the color code to the clipboard and updating the element text
const copyColor = (elem) => {
elem.innerText = "Copied";
navigator.clipboard.writeText(elem.dataset.color);
setTimeout(() => elem.innerText = elem.dataset.color, 1000);
}
const showColor = () => {
if(!pickedColors.length) return; // Returning if there are no picked colors
colorList.innerHTML = pickedColors.map(color => `
<li class="color">
<span class="rect" style="background: ${color}; border: 1px solid ${color == "#ffffff" ? "#ccc": color}"></span>
<span class="value hex" data-color="${color}">${color}</span>
</li>
`).join(""); // // Generating li for the picked color and adding it to the colorList
document.querySelector(".picked-colors").classList.remove("hide");
// Add a click event listener to each color element to copy the color code
document.querySelectorAll(".color").forEach(li => {
li.addEventListener("click", e => copyColor(e.currentTarget.lastElementChild));
});
}
showColor();
const activateEyeDropper = () => {
document.body.style.display = "none";
setTimeout(async () => {
try {
// Opening the eye dropper and getting the selected color
const eyeDropper = new EyeDropper();
const { sRGBHex } = await eyeDropper.open();
navigator.clipboard.writeText(sRGBHex);
// Adding the color to the list if it doesn't already exist
if(!pickedColors.includes(sRGBHex)) {
pickedColors.push(sRGBHex);
localStorage.setItem("picked-colors", JSON.stringify(pickedColors));
showColor();
}
} catch (error) {
alert("Failed to copy the color code!");
}
document.body.style.display = "block";
}, 10);
}
// Clearing all picked colors, updating local storage, and hiding the colorList element
const clearAllColors = () => {
pickedColors.length = 0;
localStorage.setItem("picked-colors", JSON.stringify(pickedColors));
document.querySelector(".picked-colors").classList.add("hide");
}
clearAll.addEventListener("click", clearAllColors);
colorPickerBtn.addEventListener("click", activateEyeDropper);
Creating a manifest file
Now we will create a manifest.json file for our extension.
basically this file is a required part of every chrome extension and serves as a configuration file for the extension.
It will contains detailed information about the extension, such as Name, Description, Version, Icons, and Permissions.
Now to create a manifest.json file, create a new file in the directory and name it as manifest.json and then add the following code inside it.
Note: before proceeding further change the icons link with your icon links from the below code.
{
"manifest_version": 3,
"name": "Color Picker",
"description": "A simple color picker extension. Easily pick any color on the screen, view a history of picked colors, and copy or clear them with a single click.",
"version": "1.0",
"action": {
"default_popup": "index.html"
},
"icons": {
"16": "icons/color16.png",
"32": "icons/color32.png",
"48": "icons/color48.png",
"128": "icons/color128.png"
}
}
Test and Debugging
Here we will load our extension in to chrome from our local directory for testing and debugging purposes and following the below process to test and debug.
- Open chrome browser.
- Go to this URL: chrome://extensions.
- Now you need to enable the Developer Mode toggle in the top right corner of the page.
- Click the Load unpacked button and select your extension project directory.
- Now your extension should be loaded and appeared inside the Chrome extensions page.
To test the extension, click the extension icon in the Chrome toolbar and make sure that the color picker UI appears as expected and functionality works correctly.
If you get any error or issue then you can use chrome developer tools to debug the extension and to open dev tools follow this path: Right click on the extension -> Select Inspect option. Here you will see the errors if any, then try to solve the issues and error carefully.
Mainly publishing your created extension to the chrome web store, it is essential to test and debug the extension carefully and to ensure that it is working correctly.
Publishing the extension
This the final step in the chrome extension creation process i.e. publishing it to the chrome web store, so that all the users can use it and to publish the extension you need to follow few steps, which are given below.
- First of all create a zip file of your extension.
- Now go to chrome developer dashboard.
- Click the Add new item button.
- Select the Extension option.
- Now fill out the required fields, including the name, description, and categories of your extension.
- Here upload the manifest.json file and the required icons for the extension.
- At last submit the extension for the review.
Basically publishing the extensions in the chrome web store is a good thing to show your web technology skills to a wide range of people and can learn and improve more knowledge.
And while publishing the extension for the review, if you get any error or issue then you can refer the documentation from google to do the process.
Conclusion
I hope that you all have understood about creating chrome extension by using HTML, CSS and JavaScript easily without any error or issue.
If you got any problem related to the article then you can contact us.
