Abhishek Gurjar

Posted on Sep 13

Building a Color Picker Extension

#html #css #javascript #extensions

Introduction

In this blog post, we'll explore how to create a simple yet powerful color picker browser extension. This extension allows users to easily pick colors from their screen, view a history of picked colors, and manage their color palette with simple interactions.

Project Overview

The Color Picker extension provides a user-friendly interface to:

Pick colors from the screen using the EyeDropper API.
View a history of picked colors.
Copy color codes to the clipboard.
Clear all picked colors.

Features

Color Picking: Use the EyeDropper API to select colors from any part of your screen.
Color History: Maintain a list of picked colors with easy access.
Clipboard Copy: Quickly copy color codes to the clipboard.
Clear All: Remove all colors from the history with a single click.

Technologies Used

HTML: Markup for the extension’s popup.
CSS: Styling for the popup and its elements.
JavaScript: Handles color picking, displaying color history, and managing clipboard operations.
EyeDropper API: Allows picking colors from the screen.
localStorage: Stores picked colors across sessions.

Project Structure

HTML (index.html): Contains the structure for the color picker interface.
CSS (style.css): Styles the popup and its elements.
JavaScript (script.js): Manages functionality such as picking colors, displaying them, and interacting with local storage.
Manifest (manifest.json): Defines the extension’s metadata and configuration.

Installation

To test the extension locally:

Save the files into a directory.
Open Chrome and navigate to chrome://extensions/.
Enable "Developer mode" (toggle in the top right).
Click "Load unpacked" and select your project directory.

Usage

Click the “Pick Color” button in the extension popup to activate the color picker.
Select a color from anywhere on the screen.
View the picked colors in the popup and click on any color to copy its code to the clipboard.
Click "Clear All" to remove all colors from the history.

Code Explanation

HTML

<!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>

JavaScript

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") || "[]");

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;
    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("");
    document.querySelector(".picked-colors").classList.remove("hide");

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

const activateEyeDropper = () => {
    document.body.style.display = "none";
    setTimeout(async () => {
        try {
            const 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));
                showColor();
            }
        } catch (error) {
            alert("Failed to copy the color code!");
        }
        document.body.style.display = "block";
    }, 10);
}

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);

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;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";
}

Live Demo

You can test the extension locally by following the installation instructions above. Once installed, the extension’s popup will allow you to pick colors and manage your color history.

Conclusion

This Color Picker extension demonstrates how to integrate the EyeDropper API into a browser extension, providing users with a handy tool for color selection and management. Whether you’re a designer or just someone who enjoys working with colors, this extension can enhance your workflow.

Credits

EyeDropper API: Provides the functionality to pick colors from the screen.
Poppins Font: Used for styling the text in the popup.

Author

Abhishek Gurjar is a dedicated web developer passionate about creating practical and functional web applications. Check out more of his projects on GitHub.

DEV Community