カラーピッカー拡張機能の構築

導入

このブログ投稿では、シンプルかつ強力なカラー ピッカー ブラウザ拡張機能の作成方法を検討します。この拡張機能を使用すると、ユーザーは簡単な操作で画面から色を簡単に選択し、選択した色の履歴を表示し、カラー パレットを管理できます。

プロジェクト概要

カラーピッカー拡張機能は、次のユーザーフレンドリーなインターフェイスを提供します。

• EyeDropper API を使用して画面から色を選択します。
• 選択した色の履歴を表示します。
• カラーコードをクリップボードにコピーします。
• 選択した色をすべてクリアします。

特徴

• 色の選択: EyeDropper API を使用して、画面の任意の部分から色を選択します。
• カラー履歴: 選択した色のリストを簡単にアクセスして管理します。
• クリップボードのコピー: カラーコードをクリップボードにすばやくコピーします。
• すべてクリア: ワンクリックで履歴からすべての色を削除します。

使用されている技術

• HTML: 拡張機能のポップアップのマークアップ。
• CSS: ポップアップとその要素のスタイル。
• JavaScript: カラーの選択、カラー履歴の表示、およびクリップボード操作の管理を処理します。
• EyeDropper API: 画面から色を選択できます。
• localStorage: 選択したカラーをセッション間で保存します。

プロジェクトの構造

1. HTML (index.html): カラー ピッカー インターフェイスの構造が含まれています。
2. CSS (style.css): ポップアップとその要素のスタイルを設定します。
3. JavaScript (script.js): 色の選択、表示、ローカル ストレージとの対話などの機能を管理します。
4. マニフェスト (manifest.json): 拡張機能のメタデータと構成を定義します。

インストール

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

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

使用法

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

コードの説明

HTML

    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer></script>


    <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>

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: 画面から色を選択する機能を提供します。
• ポピンズ フォント: ポップアップ内のテキストのスタイルを設定するために使用されます。

著者

Abhishek Gurjar は、実用的で機能的な Web アプリケーションの作成に情熱を注ぐ専任の Web 開発者です。 GitHub で彼のプロジェクトをさらにチェックしてください。

以上がカラーピッカー拡張機能の構築の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。