Dans cet article de blog, nous explorerons comment créer une extension de navigateur de sélecteur de couleurs simple mais puissante. Cette extension permet aux utilisateurs de sélectionner facilement des couleurs sur leur écran, d'afficher un historique des couleurs sélectionnées et de gérer leur palette de couleurs avec des interactions simples.
L'extension Color Picker fournit une interface conviviale pour :
Pour tester l'extension localement :
<!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"; }
Vous pouvez tester l'extension localement en suivant les instructions d'installation ci-dessus. Une fois installée, la popup de l'extension vous permettra de choisir les couleurs et de gérer votre historique des couleurs.
Cette extension Color Picker montre comment intégrer l'API EyeDropper dans une extension de navigateur, offrant aux utilisateurs un outil pratique pour la sélection et la gestion des couleurs. Que vous soyez un designer ou simplement quelqu'un qui aime travailler avec les couleurs, cette extension peut améliorer votre flux de travail.
Abhishek Gurjar est un développeur Web dévoué et passionné par la création d'applications Web pratiques et fonctionnelles. Découvrez plus de ses projets sur GitHub.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!