Maison >interface Web >tutoriel CSS >Création d'une extension de sélecteur de couleurs

Création d'une extension de sélecteur de couleurs

DDDoriginal: 2024-09-13 14:16:01815parcourir

Building a Color Picker Extension

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.
Copiez les codes de couleur dans le presse-papiers.
Effacer toutes les couleurs sélectionnées.

Caractéristiques

Choix 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 le 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 choisir les couleurs à partir de l'écran.
localStorage : stocke les couleurs sélectionnées au fil des sessions.

Structure du projet

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

Installation

Pour tester l'extension localement :

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

Usage

Cliquez sur le bouton « Choisir la couleur » dans la fenêtre contextuelle de l'extension pour activer le sélecteur de couleurs.
Sélectionnez une couleur n'importe où sur l'écran.
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.
Cliquez sur "Effacer tout" pour supprimer toutes les couleurs de l'historique.

Explication du code

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

Démo en direct

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.

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.
Poppins Font : 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.

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!

JavaScript json css chrome html for select Directory using Interface copy JS this history github Access

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Créer une application Crypto Finder avec ReactArticle suivant：Créer une application Crypto Finder avec React

Articles Liés

Voir plus