构建颜色选择器扩展-css教程-PHP中文网

首页

web前端

css教程

构建颜色选择器扩展

DDD

Sep 13, 2024 pm 02:16 PM

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/。
启用“开发者模式”（右上角切换）。
点击“加载解压”并选择您的项目目录。

用法

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

代码说明

超文本标记语言



    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer></script>


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

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";
}