Heim >Web-Frontend >CSS-Tutorial >Erstellen einer Farbauswahlerweiterung

Erstellen einer Farbauswahlerweiterung

DDDOriginal: 2024-09-13 14:16:01817Durchsuche

Building a Color Picker Extension

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.
Sehen Sie sich den Verlauf der ausgewählten Farben an.
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: Führen Sie eine Liste der ausgewählten Farben mit einfachem Zugriff.
Zwischenablage kopieren: Farbcodes schnell in die Zwischenablage kopieren.
Alle löschen: Entfernen Sie alle Farben mit einem einzigen Klick aus dem Verlauf.

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

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

Installation

So testen Sie die Erweiterung lokal:

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

Verwendung

Klicken Sie im Erweiterungs-Popup auf die Schaltfläche „Farbe auswählen“, um die Farbauswahl zu aktivieren.
Wählen Sie an einer beliebigen Stelle auf dem Bildschirm eine Farbe aus.
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.
Klicken Sie auf „Alle löschen“, um alle Farben aus dem Verlauf zu entfernen.

Code-Erklärung

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

Live-Demo

Sie können die Erweiterung lokal testen, indem Sie den obigen Installationsanweisungen 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, Farben vom Bildschirm auszuwählen.
Poppins-Schriftart: Wird zum Gestalten des Texts 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.

Das obige ist der detaillierte Inhalt vonErstellen einer Farbauswahlerweiterung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Erstellen einer Crypto Finder-App mit ReactNächster Artikel：Erstellen einer Crypto Finder-App mit React

In Verbindung stehende Artikel

Mehr sehen