首页 > web前端 > css教程 > 正文

构建颜色选择器扩展

DDD
发布: 2024-09-13 14:16:01
原创
746 人浏览过

Building a Color Picker Extension

介绍

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

项目概况

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

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

特征

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

使用的技术

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

项目结构

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

安装

要在本地测试扩展:

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

用法

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

代码说明

超文本标记语言

<!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";
}
登录后复制

现场演示

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

结论

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

制作人员

  • EyeDropper API:提供从屏幕上选取颜色的功能。
  • Poppins 字体:用于设置弹出窗口中文本的样式。

作者

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

以上是构建颜色选择器扩展的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:dev.to
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!