Spreadshirt Uploader

Browser Extension für automatisierte CSV-basierte Design-Uploads

Browser Extension JavaScript Canvas API Automation

Eine Firefox Extension, die den mühsamen Prozess des manuellen Spreadshirt-Uploads automatisiert. Aus einer CSV-Datei werden Designs generiert und direkt auf die Plattform hochgeladen.

📸 Extension Interface

🖼️

Screenshot der Extension folgt...

Popup-Interface mit CSV-Upload und Upload-Steuerung

🎯 Problem & Lösung

😫 Das Problem

Spreadshirt erlaubt keine Massen-Uploads. Hunderte Designs müssen einzeln hochgeladen werden – ein repetitiver, zeitaufwändiger Prozess, der stunden dauert.

✨ Die Lösung

Eine Browser Extension, die CSV-Daten einliest, PNG-Bilder generiert und Drag & Drop-Interaktionen auf der Spreadshirt-Website automatisiert.

⚡ Features

📄 CSV Parser

Einlesen von Design-Parametern (Text, Farbe, Größe, Position) aus CSV-Dateien

🎨 Canvas Renderer

Dynamische PNG-Generierung mit HTML5 Canvas API direkt im Browser

🖱️ Drag & Drop Sim

Simulation von MouseEvents für automatisierte Datei-Uploads

⏱️ Smart Timing

Intelligentes Warten auf DOM-Ready und React-Render-Zyklen

🔒 Content Script Injection

DOM-Manipulation auf fremden Websites über Manifest V3 Content Scripts

📊 Upload Protokoll

Detaillierte Logs für erfolgreiche und fehlgeschlagene Uploads

🛠️ Tech Stack

JavaScript ES6+ HTML5 Canvas API Manifest V3 Content Scripts Background Script Popup API Message Passing Firefox Extension API

💡 Lessons Learned

Wie Browser Extensions mit fremden Webseiten interagieren

Content Scripts sind der Schlüssel zur DOM-Manipulation auf externen Sites. Sie laufen im Kontext der Ziel-Website haben aber Zugriff auf Extension-APIs.

Timing ist alles: Moderne React-Apps rendern asynchron. Events müssen geprüft werden, ob Zielelemente existieren – oft mit MutationObserver oder Retry-Loops.

Event-Simulation: Drag & Drop erfordert nicht nur einfache click-Events, sondern komplette Event-Sequenzen (dragstart, dragenter, dragover, drop, dragend) mit korrekten DataTransfer-Objekten.

🔧 Code Snippet: Drag & Drop Simulation

// Simuliert ein Drag & Drop Event auf Spreadshirt's Upload-Zone
function simulateDragDrop(element, file) {
    const dataTransfer = new DataTransfer();
    dataTransfer.items.add(file);
    
    // Event-Sequenz für React-Kompatibilität
    const events = ['dragenter', 'dragover', 'drop'];
    
    events.forEach(eventType => {
        const event = new DragEvent(eventType, {
            bubbles: true,
            cancelable: true,
            dataTransfer: dataTransfer
        });
        element.dispatchEvent(event);
    });
}

// Canvas-basierte PNG-Generierung
function generateDesignPNG(designData) {
    const canvas = document.createElement('canvas');
    canvas.width = designData.width;
    canvas.height = designData.height;
    
    const ctx = canvas.getContext('2d');
    ctx.fillStyle = designData.bgColor;
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    
    ctx.font = designData.font;
    ctx.fillStyle = designData.textColor;
    ctx.textAlign = 'center';
    ctx.fillText(designData.text, canvas.width/2, canvas.height/2);
    
    return canvas.toDataURL('image/png');
}
            

❓ FAQ

Was macht die Spreadshirt Uploader Extension?

Die Extension automatisiert den Upload von Designs auf Spreadshirt. Sie liest Design-Daten aus einer CSV-Datei, generiert PNG-Bilder mit der Canvas API und simuliert Drag & Drop-Interaktionen auf der Spreadshirt-Website.

Welche Browser werden unterstützt?

Die Extension wurde für Firefox entwickelt und nutzt das Manifest V3-Format. Eine Chrome/Edge-Portierung ist mit minimalen Anpassungen möglich, da die APIs weitgehend kompatibel sind.

Wie funktioniert die CSV-Verarbeitung?

Die Extension liest eine CSV-Datei mit Design-Parametern (Text, Farben, Größen, etc.). Für jeden Eintrag wird ein Canvas-Element erstellt, das Design gerendert und als PNG exportiert. Anschließend wird der Upload auf Spreadshirt automatisiert.

Kann die Extension mit anderen Plattformen arbeiten?

Der Kern (CSV-Parser, Canvas-Renderer) ist universell einsetzbar. Die Upload-Logik ist jedoch spezifisch für Spreadshirt implementiert. Für andere Plattformen müsste die Interaktions-Logik angepasst werden.

Welche technischen Herausforderungen gab es?

Die größte Herausforderung war die Simulation von Drag & Drop-Events auf einer fremden Website. Content Scripts müssen DOM-Events auslösen, die von Spreadshirt's React-basiertem Frontend akzeptiert werden. Außerdem musste das Timing zwischen Seiten-Laden und Interaktionen exakt abgestimmt werden.

📋 Projekt-Info

Status: Funktionsfähig, in Produktion
Repository: D:\arbeit\git\firefoxspredshirt
Autor: Marcel Verkooyen
Lizenz: Apache 2.0 (Open Source)
Plattform: Firefox (Manifest V3)
Sprachen: JavaScript, HTML, CSS

← Zurück zu Projekten