建立顏色選擇器擴展

DDD
發布: 2024-09-13 14:16:01
原創
500 人瀏覽過

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. 按一下「全部清除」可從歷史記錄中刪除所有顏色。

程式碼說明

超文本標記語言

     
登入後複製

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"; }
    登入後複製

    現場演示

    您可以按照上面的安裝說明在本地測試擴充功能。安裝後,擴充功能的彈出視窗將允許您選擇顏色並管理您的顏色歷史記錄。

    結論

    這個顏色選擇器擴充功能示範如何將 EyeDropper API 整合到瀏覽器擴充功能中,為使用者提供一個方便的顏色選擇和管理工具。無論您是設計師還是喜歡使用顏色的人,此擴充功能都可以增強您的工作流程。

    製作人員

    • EyeDropper API:提供從螢幕上選取顏色的功能。
    • Poppins 字體:用於設定彈出視窗中文字的樣式。

    作者

    Abhishek Gurjar是一位專注的 Web 開發人員,熱衷於創建實用且功能性的 Web 應用程式。在 GitHub 上查看他的更多專案。

    以上是建立顏色選擇器擴展的詳細內容。更多資訊請關注PHP中文網其他相關文章!

    來源:dev.to
    本網站聲明
    本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
    最新下載
    更多>
    網站特效
    網站源碼
    網站素材
    前端模板
    關於我們 免責聲明 Sitemap
    PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!