在這篇文章中,我們將探索如何建立一個簡單但功能強大的顏色選擇器瀏覽器擴充功能。此擴充功能允許用戶輕鬆地從螢幕上選擇顏色,查看所選顏色的歷史記錄,並透過簡單的互動來管理他們的調色板。
顏色選擇器擴充功能提供了一個使用者友善的介面:
要在本地測試擴充:
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 => `
@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中文網其他相關文章!