JavaScript Color Picker Chrome Extension

In this tutorial, You will learn to create a javascript color picker chrome extension from scratch with some simple steps that will help you to enhance your coding skills.

The color picker is the chrome extension tool that is used to pick up colors in RGB format easily from anywhere on the screen. It is mainly used by web designers or graphic designers to make very easy their designing tasks.

So, Once you create a color picker extension for chrome, Then you can easily create any type of other extensions and upload them to the chrome store.

javascript color picker chrome extension

Create Color Picker Chrome Extension in JavaScript

Now you will learn how to create a color picker chrome extension step by step. But before getting started with this tutorial, You should have a good understanding of HTML, CSS, and javascript. Because extension UI is made by HTML & CSS and Extension functionality is written in JavaScript

Read Also –

How to Create Accordion in JavaScript

JavaScript Password Strength Cheker

1. Create Color Picker Directory

First of all, You have to create the following directory structure –

codingstatus/
    |__icons/
    |   |__icon16.png
    |   |__icon32.png
    |   |__icon48.png
    |   |__icon128.png
    |__manifest.json
    |__index.html
    |__style.css
    |__color-picker.js
    |

2. Make Color Picker Icon

Now, You have to put four icons in the icons folder. But an extension of all icons must be png.

These all icons will be used for chrome extension by defining them as an object for values of 18, 32, 48, and 128 properties.

You can also use the same icons for all 18, 32, 48, and 128 properties. So, You can also put a single png icon in the icons folder.

3. Create Color Picker Manifest files

File Name – manifest.json

{
    "manifest_version": 3,
    "name": "CodingStatus Color Picker",
    "description": "Color picker is provided by CodingStatus that is very simple to pick color from anywhere of the screen",
    "version": "1.0.0",
    "action": {
        "default_popup": "index.html"
    },
    "icons": {
        "16": "icons/icon.png",
        "32": "icons/icon.png",
        "48": "icons/icon.png",
        "128": "icons/icon.png"
    }
}

4. Create Color Picker UI in HTML

Now, write HTML code in the index.html to create a UI of color extension and also Include style.css file and color-picker.js file

  • Include css file style.css
  • Create a main div with class color-picker-popupbox and
  • also two more div with class picked-colors and picker within the main div.
  • Create a p tag with class clear-color to clear selected colors
  • Create a button with id pick-color to pick the color
  • Create an unordered list with id all-colors to diplay all the selected colors

File Name – index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="color-picker-popupbox">
      <div class="picked-colors hide">
        <p class="title">Picked colors</p>
        <ul id="all-colors"></ul>
    </div>
      <div class="picker">
        <p id="clear-color">Clear All</p>
        <button id="pick-color">Pick Color</button>
      </div>
    </div>
    
    <script src="color-picker.js" defer></script>
  </body>
</html>

 

5. Design Color Picker UI in CSS

Now, You can use the following CSS code to design the color picker chrome extension

File Name – style.css

.color-picker-popupbox {
  width: 250px;
  background: #fff;
  text-align: center;
  padding: 20px 10px;
}

.picker #pick-color {
    border: 1px solid lightgray;
    font-size: 16px;
    cursor: pointer;
    padding: 5px 10px;
    background: linear-gradient(to bottom, #99ccff 29%, #ff99cc 100%);
}
#pick-color:hover {
  background: linear-gradient(to bottom, #99ccff 29%, #ffcccc 100%);

}
#all-colors{
  list-style-type: none;
}
#all-colors li{
  margin: 10px 0px;
  position: relative;
  right:10px;
}
.picked-colors .title{
  font-size: 20px;
    color: red;
    text-decoration: underline;
}
 #clear-color{
    color: rebeccapurple;
    cursor: pointer;
    display: none
}

.picked-colors.hide {
  display: none;
}

6. Write Color Picker Script in JavaScript

Now, You have to write javascript code with the following methods –

copyColor() – This function is create to copy the picked colors

displayColor() – This function is created to display colors after picked them

eyeDropper() – This function is created to pick colors with eyedropper.

clearColors – This function is created to clear the picked colors.

File Name – color-picker.js

let pickColor, clearColorbtn, allColors, pickedColors;

pickColor = document.getElementById("pick-color");
clearColorbtn = document.getElementById("clear-color");
allColors = document.getElementById("all-colors");
pickedColors = JSON.parse(localStorage.getItem("picked-colors") || "[]");


let copyColor = function(elem) {
    elem.innerHTML = "<span style='color:green'>color has been copied<span>";
    navigator.clipboard.writeText(elem.dataset.color);
    setTimeout(() => elem.innerText = elem.dataset.color, 1000);
}

let displayColor = function() {
    if(!pickedColors.length) return; 
    allColors.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(""); 
    document.querySelector(".picked-colors").classList.remove("hide");

    
    document.querySelectorAll(".color").forEach(li => {
        li.addEventListener("click", e => copyColor(e.currentTarget.lastElementChild));
    });
    clearColorbtn.style.display = "block"

}
displayColor();

let eyeDropper = function() {
    document.body.style.display = "none";
    setTimeout(async () => {
        try {
          
            let eyeDropper = new EyeDropper();
            const { sRGBHex } = await eyeDropper.open();
            navigator.clipboard.writeText(sRGBHex);

            if(!pickedColors.includes(sRGBHex)) {
                pickedColors.push(sRGBHex);
                localStorage.setItem("picked-colors", JSON.stringify(pickedColors));
                displayColor();
            }
        } catch (error) {
            alert("Error! Color code is not picked");
        }
        document.body.style.display = "block";
        clearColorbtn.style.display = "block"
    }, 10);
}

let clearColors = function() {
    pickedColors.length = 0;
    localStorage.setItem("picked-colors", JSON.stringify(pickedColors));
    document.querySelector(".picked-colors").classList.add("hide");
    clearColorbtn.style.display = "none"
}

clearColorbtn.addEventListener("click", clearColors);
pickColor.addEventListener("click", eyeDropper);