ebaysnipeextension/DEVELOPMENT.md

Entwicklungsanleitung

Setup

npm install

Build-Befehle

Production Build

npm run build

Erstellt optimierte Dateien im dist/ Ordner.

Development Build mit Watch-Mode

npm run dev

Vite beobachtet Änderungen und rebuildet automatisch. Du musst die Extension in Chrome manuell neu laden.

Extension in Chrome laden

1. Öffne chrome://extensions/
2. Aktiviere "Entwicklermodus"
3. Klicke "Entpackte Erweiterung laden"
4. Wähle diesen Projektordner

Nach Code-Änderungen

1. Warte bis Vite fertig gebaut hat (im Watch-Mode automatisch)
2. Gehe zu chrome://extensions/
3. Klicke auf das Reload-Symbol bei deiner Extension
4. Lade die Amazon-Seite neu

Projektstruktur

src/
├── content.jsx          # Entry Point - wird in die Amazon-Seite injiziert
├── StaggeredMenu.jsx    # React Komponente für das animierte Menü
└── StaggeredMenu.css    # Styles für das Menü

dist/                    # Build-Output (von Vite generiert)
├── content.js           # Gebündeltes JavaScript
└── style.css            # Gebündeltes CSS

manifest.json            # Chrome Extension Konfiguration
vite.config.js          # Vite Build-Konfiguration

Wichtige Dateien

src/content.jsx

• Haupt-Entry-Point
• Injiziert das StaggeredMenu
• Verwaltet Product Bars
• Beobachtet DOM-Änderungen für Infinite Scroll

src/StaggeredMenu.jsx

• React-Komponente mit GSAP-Animationen
• Vollständig konfigurierbar über Props
• Accessibility-Features eingebaut

vite.config.js

• Konfiguriert Vite für Chrome Extension Build
• Single-Entry-Point Setup
• Deaktiviert Code-Splitting für Extensions

Anpassungen

Menu-Items ändern

Bearbeite menuItems Array in src/content.jsx:

const menuItems = [
  { label: 'Dein Label', ariaLabel: 'Beschreibung', link: '/dein-link' }
];

Styling anpassen

Bearbeite src/StaggeredMenu.css oder passe Props in src/content.jsx an:

<StaggeredMenu
  colors={['#farbe1', '#farbe2']}
  accentColor="#akzentfarbe"
  position="left"  // oder "right"
/>

Product Bar anpassen

Die Product Bar Styles sind in src/StaggeredMenu.css unter .amazon-ext-product-bar.

Debugging

Console Logs

Öffne Developer Tools (F12) auf Amazon:

• "Amazon Product Bar Extension (React) loaded"
• "Found X product cards to process"
• "StaggeredMenu injected into page"
• "Menu opened" / "Menu closed"

React DevTools

Installiere React DevTools Extension um die Komponenten zu inspizieren.

Vite Build Errors

Wenn der Build fehlschlägt:

1. Lösche node_modules/ und dist/
2. Führe npm install aus
3. Führe npm run build aus

Häufige Probleme

Extension lädt nicht:

• Prüfe ob dist/content.js und dist/style.css existieren
• Stelle sicher, dass manifest.json auf die richtigen Dateien zeigt

Menu erscheint nicht:

• Prüfe Console auf React-Fehler
• Stelle sicher, dass GSAP korrekt importiert wurde
• Prüfe ob der Menu-Container erstellt wurde

Product Bars fehlen:

• Prüfe ob du auf einer Amazon-Suchergebnisseite bist
• Schaue in die Console für "Found X product cards"
• Prüfe ob die Selektoren noch mit Amazon's DOM übereinstimmen

Performance

• Vite erstellt einen optimierten Build
• GSAP-Animationen sind GPU-beschleunigt
• MutationObserver ist auf relevante Änderungen beschränkt
• React-Rendering ist auf das Menu beschränkt

Nächste Schritte

• Popup-UI für Extension-Einstellungen
• Background-Script für Daten-Synchronisation
• Options-Page für Konfiguration
• Weitere Amazon-Seiten unterstützen (Produktdetails, etc.)