このブログ投稿では、シンプルかつ強力なカラー ピッカー ブラウザ拡張機能の作成方法を検討します。この拡張機能を使用すると、ユーザーは簡単な操作で画面から色を簡単に選択し、選択した色の履歴を表示し、カラー パレットを管理できます。
カラーピッカー拡張機能は、次のユーザーフレンドリーなインターフェイスを提供します。
拡張機能をローカルでテストするには:
<!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>
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);
@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 中国語 Web サイトの他の関連記事を参照してください。