✨ Hauptfunktionen

📤

Automatischer Massen-Upload

Lädt hunderte Geburtstagskind-Designs per CSV-Import automatisch auf Spreadshirt hoch. Queue-basierte Verarbeitung mit Fortschrittsanzeige.

🔍

Intelligente Seitenerkennung

MutationObserver + Polling erkennt Spreadshirt-Design-Seiten und wartet auf Vue.js-Rendering bevor der Upload startet.

📋

CSV-Namensimport

Namen aus CSV-Dateien (long_OAC.csv, oac_part2.csv) werden eingelesen, dedupliziert und in die Upload-Queue geladen.

🖱️

Drag & Drop Simulation

Simuliert native Drag-Events mit DataTransfer und Mauskoordinaten für Vue.js-basierte File-Uploader auf Spreadshirt.

💻 Quellcode-Einblicke

Echte Code-Snippets aus dem Projekt-Repository — direkt aus der Entwicklungsumgebung.

JSON manifest.json — Chrome & Firefox Extension Setup

{
  "manifest_version": 3,
  "name": "Spreadshirt Design Uploader",
  "version": "1.0.0",
  "description": "Lädt automatisch Geburtstagskind-Designs auf Spreadshirt hoch",
  "permissions": ["activeTab", "storage", "scripting"],
  "host_permissions": [
    "https://partner.spreadshirt.de/*"
  ],
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [{
    "matches": ["https://partner.spreadshirt.de/designs*"],
    "js": ["content.js"],
    "run_at": "document_end",
    "all_frames": false
  }],
  "action": {
    "default_popup": "popup.html",
    "default_icon": { "16": "icon16.png", "48": "icon48.png", "96": "icon96.png" }
  },
  "icons": { "16": "icon16.png", "48": "icon48.png", "96": "icon96.png" }
}

JavaScript background.js — Tab-Management & Nachrichten-Routing

// Background Service Worker – öffnet/fokussiert Spreadshirt-Tab, leitet Upload-Queue weiter
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.action === 'uploadDesigns') {
    handleDesignUpload(message.names)
      .then(result => sendResponse({ success: true, result }))
      .catch(error => sendResponse({ success: false, error: error.message }));
    return true; // async response
  }
});

async function handleDesignUpload(names) {
  const tabs = await chrome.tabs.query({ 
    url: 'https://partner.spreadshirt.de/designs*' 
  });
  
  let tab;
  if (tabs.length > 0) {
    tab = tabs[0];
    await chrome.tabs.update(tab.id, { active: true });
  } else {
    tab = await chrome.tabs.create({ 
      url: 'https://partner.spreadshirt.de/designs' 
    });
  }

  // Warte auf Seitenlade-Abschluss, dann sende Queue an Content Script
  await new Promise(resolve => {
    const listener = (tabId, changeInfo) => {
      if (tabId === tab.id && changeInfo.status === 'complete') {
        chrome.tabs.onUpdated.removeListener(listener);
        resolve();
      }
    };
    chrome.tabs.onUpdated.addListener(listener);
  });

  await chrome.tabs.sendMessage(tab.id, { 
    action: 'startUpload', 
    names: names 
  });
}

JavaScript content.js — MutationObserver + Drag & Drop für Vue.js Uploader

// Warte auf Vue.js-Rendering mit MutationObserver + Polling-Fallback
await new Promise((resolve) => {
  let attempts = 0;
  const maxAttempts = 40;
  
  const observer = new MutationObserver((mutations) => {
    const btn = document.getElementById('upload-btn');
    if (btn) {
      observer.disconnect();
      clearInterval(checkInterval);
      resolve();
    }
  });
  
  if (document.body) {
    observer.observe(document.body, { 
      childList: true, subtree: true 
    });
  }

  const checkInterval = setInterval(() => {
    attempts++;
    const btn = document.getElementById('upload-btn');
    if (btn || attempts >= maxAttempts) {
      observer.disconnect();
      clearInterval(checkInterval);
      resolve();
    }
  }, 500);
});

// Simuliere Drag & Drop mit DataTransfer für File-Upload
const dataTransfer = new DataTransfer();
dataTransfer.items.add(file);
const dropEvent = new DragEvent('drop', {
  bubbles: true, cancelable: true,
  dataTransfer: dataTransfer,
  clientX: centerX, clientY: centerY
});
dropTarget.dispatchEvent(dropEvent);

// Triggere Change-Event auf File-Input für reaktive Frameworks
fileInput.dispatchEvent(new Event('change', { bubbles: true }));

📋 Projektstruktur

manifest.json — Manifest V3, Cross-Browser-kompatibel (Chrome, Firefox, Edge)
background.js — Service Worker: Tab-Management, Nachrichten-Routing, Error-Recovery
content.js — MutationObserver für Vue.js-Erkennung, Drag & Drop Simulation
popup.js — CSV-Import mit chrome.storage, Queue-Persistenz, Live-Preview
popup.html — Benutzerfreundliches Popup-Interface mit Status-Indikator

🚀 Vibecoding — KI-gestützte Entwicklung

Moderne KI-Coding-Tools („Vibecoding") reduzieren die Entwicklungszeit dramatisch. Was früher Wochen dauerte, entsteht heute in Tagen — mit Code auf Produktionsniveau.

System-Prompt für KI-Coding-Agenten

Baue eine Software-Lösung für folgendes Problem:
Firefox Plugin — Spreadshirt Design Uploader

Anforderungen:
- Browser-Extension mit Manifest V3
- CSV-Import für Namenslisten
- Automatischer Upload per Drag & Drop Simulation
- Vue.js-Kompatibilität mit MutationObserver
- Queue-Persistenz in chrome.storage
- Fehlerbehandlung mit Logging und Retry

Tech-Stack: JavaScript, Manifest V3, chrome.storage API, Vue.js
Ziel: Produktionsreifer Code, kein Prototyp.

Bereit für Ihre eigene Browser-Extension?

Ob Automation, Web-App oder individuelle Browser-Extension — wir setzen Ihre Idee um. Unverbindlich, pragmatisch, code-gestützt.

📞 02406 803 7603 ✉️ info@computerkumpel.de

🦊 Firefox Plugin — Spreadshirt Design Uploader