在这篇博文中,我们将探索如何创建一个简单但功能强大的颜色选择器浏览器扩展。此扩展允许用户轻松地从屏幕上选择颜色,查看所选颜色的历史记录,并通过简单的交互来管理他们的调色板。
颜色选择器扩展提供了一个用户友好的界面:
要在本地测试扩展:
<!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>
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);
@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 集成到浏览器扩展中,为用户提供一个方便的颜色选择和管理工具。无论您是设计师还是喜欢使用颜色的人,此扩展都可以增强您的工作流程。
Abhishek Gurjar 是一位专注的 Web 开发人员,热衷于创建实用且功能性的 Web 应用程序。在 GitHub 上查看他的更多项目。
以上是构建颜色选择器扩展的详细内容。更多信息请关注PHP中文网其他相关文章!