构建颜色选择器扩展

您可以按照上面的安装说明在本地测试扩展。安装后，扩展程序的弹出窗口将允许您选择颜色并管理您的颜色历史记录。

结论

此颜色选择器扩展演示了如何将 EyeDropper API 集成到浏览器扩展中，为用户提供了一个方便的颜色选择和管理工具。无论您是设计师还是喜欢使用颜色的人，此扩展都可以增强您的工作流程。

制作人员

作者

Abhishek Gurjar 是一位专注的 Web 开发人员，热衷于创建实用且功能齐全的 Web 应用程序。在 GitHub 上查看他的更多项目。

首页 > 编程 > 构建颜色选择器扩展

构建颜色选择器扩展

发布于2024-11-01

Building a Color Picker Extension

介绍

在这篇博文中，我们将探索如何创建一个简单但功能强大的颜色选择器浏览器扩展。此扩展允许用户轻松地从屏幕上选择颜色，查看所选颜色的历史记录，并通过简单的交互来管理调色板。

项目概况

颜色选择器扩展提供了一个用户友好的界面：

使用 EyeDropper API 从屏幕上选取颜色。
查看所选颜色的历史记录。
将颜色代码复制到剪贴板。
清除所有选取的颜色。

特征

颜色选择：使用 EyeDropper API 从屏幕的任何部分选择颜色。
颜色历史记录：维护易于访问的所选颜色列表。
剪贴板复制：快速复制颜色代码到剪贴板。
全部清除：只需单击一下即可从历史记录中删除所有颜色。

使用的技术

HTML：扩展程序弹出窗口的标记。
CSS：弹出窗口及其元素的样式。
JavaScript：处理颜色拾取、显示颜色历史记录以及管理剪贴板操作。
EyeDropper API：允许从屏幕上选取颜色。
localStorage：存储跨会话选择的颜色。

项目结构

HTML (index.html)：包含颜色选择器界面的结构。
CSS (style.css)：设置弹出窗口及其元素的样式。
JavaScript (script.js)：管理诸如选择颜色、显示颜色以及与本地存储交互等功能。
Manifest (manifest.json)：定义扩展的元数据和配置。

安装

本地测试扩展：

将文件保存到目录中。
打开 Chrome 并导航至 chrome://extensions/。
启用“开发者模式”（右上角切换）。
点击“加载解压”并选择您的项目目录。

用法

单击扩展弹出窗口中的“选择颜色”按钮以激活颜色选择器。
从屏幕上的任意位置选择颜色。
在弹出窗口中查看选取的颜色，然后单击任何颜色将其代码复制到剪贴板。
单击“全部清除”可从历史记录中删除所有颜色。

代码说明

超文本标记语言



    
    


    
        
            
        
        
            
                Picked colors
                Clear All

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 => `

${color}

`).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";
}