カラーピッカー拡張機能の構築-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

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.json): 拡張機能のメタデータと構成を定義します。

インストール

拡張機能をローカルでテストするには:

ファイルをディレクトリに保存します。
Chrome を開き、chrome://extensions/ に移動します。
「開発者モード」を有効にします (右上のトグル)。
「解凍してロード」をクリックし、プロジェクトディレクトリを選択します。

使用法

拡張機能ポップアップの「カラーを選択」ボタンをクリックして、カラーピッカーをアクティブにします。
画面上の任意の場所から色を選択します。
ポップアップで選択した色を表示し、任意の色をクリックしてコードをクリップボードにコピーします。
履歴からすべての色を削除するには、[すべてクリア] をクリックします。

コードの説明

HTML

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

ログイン後にコピー