Introduction

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.

Aperçu du projet

L'extension Color Picker fournit une interface conviviale pour :

• Choisissez les couleurs sur l'écran à l'aide de l'API EyeDropper.
• Affichez un historique des couleurs sélectionnées.
• Copier les codes de couleur dans le presse-papiers.
• Effacer toutes les couleurs sélectionnées.

Caractéristiques

• Sélection des couleurs : utilisez l'API EyeDropper pour sélectionner les couleurs de n'importe quelle partie de votre écran.
• Historique des couleurs : conservez une liste des couleurs sélectionnées avec un accès facile.
• Copie du presse-papiers : copiez rapidement les codes de couleur dans le presse-papiers.
• Effacer tout : supprimez toutes les couleurs de l'historique en un seul clic.

Technologies utilisées

• HTML : balisage pour la popup de l'extension.
• CSS : style pour la popup et ses éléments.
• JavaScript : gère la sélection des couleurs, l'affichage de l'historique des couleurs et la gestion des opérations du presse-papiers.
• API EyeDropper : permet de sélectionner les couleurs à partir de l'écran.
• localStorage : stocke les couleurs sélectionnées au fil des sessions.

Structure du projet

1. HTML (index.html) : contient la structure de l'interface du sélecteur de couleurs.
2. CSS (style.css) : stylise la popup et ses éléments.
3. JavaScript (script.js) : gère les fonctionnalités telles que la sélection des couleurs, leur affichage et l'interaction avec le stockage local.
4. Manifest (manifest.json) : définit les métadonnées et la configuration de l'extension.

Installation

Pour tester l'extension localement :

1. Enregistrez les fichiers dans un répertoire.
2. Ouvrez Chrome et accédez à chrome://extensions/.
3. Activez le « Mode développeur » (bascule en haut à droite).
4. Cliquez sur "Charger décompressé" et sélectionnez le répertoire de votre projet.

Usage

1. Cliquez sur le bouton « Choisir la couleur » dans la fenêtre contextuelle de l'extension pour activer le sélecteur de couleurs.
2. Sélectionnez une couleur n'importe où sur l'écran.
3. Affichez les couleurs sélectionnées dans la fenêtre contextuelle et cliquez sur n'importe quelle couleur pour copier son code dans le presse-papiers.
4. Cliquez sur « Tout effacer » pour supprimer toutes les couleurs de l'historique.

Explication du code

HTML

    
    


    

        

            Pick Color
        
        

            

                
Picked colors
                Clear All
            
            

        
    

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

Démo en direct

Vous pouvez tester l'extension localement en suivant les instructions d'installation ci-dessus. Une fois installée, la fenêtre contextuelle de l'extension vous permettra de choisir des couleurs et de gérer votre historique des couleurs.

Conclusion

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.

Crédits

• API EyeDropper : fournit la fonctionnalité permettant de sélectionner les couleurs à partir de l'écran.
• Police Poppins : utilisée pour styliser le texte dans la fenêtre contextuelle.

Auteur

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.