search

Home >Web Front-end >CSS Tutorial >Building a Color Picker Extension

Building a Color Picker Extension

DDD
DDDOriginal
2024-09-13 14:16:01820browse

Building a Color Picker Extension

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

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

Installation

To test the extension locally:

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

Usage

  1. Click the “Pick Color” button in the extension popup to activate the color picker.
  2. Select a color from anywhere on the screen.
  3. View the picked colors in the popup and click on any color to copy its code to the clipboard.
  4. 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.

The above is the detailed content of Building a Color Picker Extension. For more information, please follow other related articles on the PHP Chinese website!

JavaScript json css chrome html for select Directory using Interface copy JS this history github Access
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Building a Crypto Finder App with ReactNext article：Building a Crypto Finder App with React

Related articles

See more