Einführung

In diesem Blogbeitrag erfahren Sie, wie Sie eine einfache, aber leistungsstarke Browsererweiterung für die Farbauswahl erstellen. Mit dieser Erweiterung können Benutzer ganz einfach Farben auf ihrem Bildschirm auswählen, einen Verlauf der ausgewählten Farben anzeigen und ihre Farbpalette mit einfachen Interaktionen verwalten.

Projektübersicht

Die Color Picker-Erweiterung bietet eine benutzerfreundliche Oberfläche für:

• Wählen Sie mit der EyeDropper-API Farben vom Bildschirm aus.
• Verlauf der ausgewählten Farben anzeigen.
• Farbcodes in die Zwischenablage kopieren.
• Alle ausgewählten Farben löschen.

Merkmale

• Farbauswahl: Verwenden Sie die EyeDropper-API, um Farben aus einem beliebigen Teil Ihres Bildschirms auszuwählen.
• Farbverlauf: Verwalten Sie eine Liste der ausgewählten Farben mit einfachem Zugriff.
• Zwischenablage kopieren: Kopieren Sie Farbcodes schnell in die Zwischenablage.
• Alle löschen: Alle Farben mit einem einzigen Klick aus dem Verlauf entfernen.

Verwendete Technologien

• HTML: Markup für das Popup der Erweiterung.
• CSS: Styling für das Popup und seine Elemente.
• JavaScript: Verwaltet die Farbauswahl, die Anzeige des Farbverlaufs und die Verwaltung von Zwischenablagevorgängen.
• EyeDropper-API: Ermöglicht die Auswahl von Farben auf dem Bildschirm.
• localStorage: Speichert ausgewählte Farben sitzungsübergreifend.

Projektstruktur

1. HTML (index.html): Enthält die Struktur für die Farbauswahlschnittstelle.
2. CSS (style.css): Gestaltet das Popup und seine Elemente.
3. JavaScript (script.js): Verwaltet Funktionen wie das Auswählen von Farben, deren Anzeige und die Interaktion mit dem lokalen Speicher.
4. Manifest (manifest.json): Definiert die Metadaten und Konfiguration der Erweiterung.

Installation

Um die Erweiterung lokal zu testen:

1. Speichern Sie die Dateien in einem Verzeichnis.
2. Öffnen Sie Chrome und navigieren Sie zu chrome://extensions/.
3. Aktivieren Sie den „Entwicklermodus“ (Schalter oben rechts).
4. Klicken Sie auf „Entpackt laden“ und wählen Sie Ihr Projektverzeichnis aus.

Verwendung

1. Klicken Sie im Erweiterungs-Popup auf die Schaltfläche „Farbe auswählen“, um die Farbauswahl zu aktivieren.
2. Wählen Sie an einer beliebigen Stelle auf dem Bildschirm eine Farbe aus.
3. Sehen Sie sich die ausgewählten Farben im Popup an und klicken Sie auf eine beliebige Farbe, um deren Code in die Zwischenablage zu kopieren.
4. Klicken Sie auf „Alle löschen“, um alle Farben aus dem Verlauf zu entfernen.

Code-Erklärung

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

Live-Demo

Sie können die Erweiterung lokal testen, indem Sie den Installationsanweisungen oben folgen. Nach der Installation können Sie im Popup der Erweiterung Farben auswählen und Ihren Farbverlauf verwalten.

Abschluss

Diese Color Picker-Erweiterung zeigt, wie die EyeDropper-API in eine Browser-Erweiterung integriert wird und Benutzern ein praktisches Tool zur Farbauswahl und -verwaltung zur Verfügung gestellt wird. Egal, ob Sie Designer sind oder einfach nur jemand, der gerne mit Farben arbeitet, diese Erweiterung kann Ihren Arbeitsablauf verbessern.

Credits

• EyeDropper API: Bietet die Funktionalität zum Auswählen von Farben auf dem Bildschirm.
• Poppins-Schriftart: Wird zum Gestalten des Textes im Popup verwendet.

Autor

Abhishek Gurjar ist ein engagierter Webentwickler, der sich mit der Entwicklung praktischer und funktionaler Webanwendungen beschäftigt. Schauen Sie sich weitere seiner Projekte auf GitHub an.