# Entwicklungsanleitung

## Setup

```bash
npm install
```

## Build-Befehle

### Production Build
```bash
npm run build
```
Erstellt optimierte Dateien im `dist/` Ordner.

### Development Build mit Watch-Mode
```bash
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`:
```javascript
const menuItems = [
  { label: 'Dein Label', ariaLabel: 'Beschreibung', link: '/dein-link' }
];
```

### Styling anpassen
Bearbeite `src/StaggeredMenu.css` oder passe Props in `src/content.jsx` an:
```javascript
<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.)