建立顏色選擇器擴展-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/。
啟用「開發者模式」（右上角切換）。
點選「載入解壓縮」並選擇您的項目目錄。

用法

點擊擴充彈出視窗中的「選擇顏色」按鈕以啟動顏色選擇器。
從螢幕上的任意位置選擇一種顏色。
在彈出視窗中查看所選顏色，然後按一下任何顏色將其程式碼複製到剪貼簿。
按一下「全部清除」可從歷史記錄中刪除所有顏色。

程式碼說明

超文本標記語言

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

登入後複製