# Amazon Product Bar Extension

Eine Chrome Extension mit React, StaggeredMenu und AppWrite Cloud Storage, die eine Bar unter Produktbildern auf Amazon-Suchergebnisseiten hinzufügt.

## Features

- 🎨 Animiertes StaggeredMenu mit GSAP
- ⚛️ React-basierte Architektur
- 🔥 Product Bar unter jedem Produktbild
- ☁️ **AppWrite Cloud Storage** - Synchronisation über alle Geräte
- 🔐 **Benutzer-Authentifizierung** - Sichere Datenspeicherung
- 🤖 **AI-Integration** - Mistral AI für Titel-Generierung
- 📱 Responsive Design mit Accessibility-Features
- 🌐 Unterstützt alle Amazon-Domains
- 🔄 **Offline-Funktionalität** - Arbeitet auch ohne Internet
- 📊 **Daten-Migration** - Automatische Übertragung von localStorage

## Installation

### Voraussetzungen

1. **AppWrite Account**: Erstelle einen Account bei [AppWrite](https://appwrite.io)
2. **Mistral AI API Key** (optional): Für AI-Titel-Generierung von [Mistral AI](https://mistral.ai)

### AppWrite Setup

1. **Projekt erstellen**:
   - Gehe zu deinem AppWrite Dashboard
   - Erstelle ein neues Projekt
   - Notiere dir die **Project ID**

2. **Datenbank konfigurieren**:
   - Erstelle eine neue Datenbank mit ID: `amazon-extension-db`
   - Erstelle folgende Collections:
     - `amazon-ext-enhanced-items` (Enhanced Items)
     - `amazon-ext-saved-products` (Basic Products)
     - `amazon_ext_blacklist` (Blacklisted Brands)
     - `amazon-ext-enhanced-settings` (User Settings)
     - `amazon-ext-migration-status` (Migration Status)

3. **Benutzer-Authentifizierung**:
   - Aktiviere Email/Password Authentication
   - Konfiguriere Benutzerregistrierung (falls gewünscht)

### Für Entwicklung

1. Dependencies installieren:
```bash
npm install
```

2. AppWrite Konfiguration anpassen:
   - Öffne `src/AppWriteConfig.js`
   - Trage deine AppWrite-Daten ein:
   ```javascript
   export const APPWRITE_CONFIG = {
     endpoint: 'https://dein-appwrite-server.com/v1',
     projectId: 'deine-project-id',
     databaseId: 'amazon-extension-db'
   };
   ```

3. Build erstellen:
```bash
npm run build
```

4. Extension in Chrome laden:
   - Öffne `chrome://extensions/`
   - Aktiviere "Entwicklermodus" (oben rechts)
   - Klicke auf "Entpackte Erweiterung laden"
   - Wähle diesen Ordner aus

### Für Entwicklung mit Auto-Rebuild

```bash
npm run dev
```

Dies startet Vite im Watch-Modus. Nach Änderungen musst du die Extension in Chrome neu laden.

## Erste Schritte

### 1. Anmeldung
1. Öffne eine Amazon-Suchergebnisseite
2. Klicke auf das StaggeredMenu (oben rechts)
3. Melde dich mit deinen AppWrite-Zugangsdaten an
4. Bei der ersten Anmeldung werden deine lokalen Daten automatisch migriert

### 2. API-Konfiguration (Optional)
1. Gehe zu "Settings" im Menu
2. Trage deinen Mistral AI API Key ein
3. Teste die Verbindung
4. Speichere die Einstellungen

### 3. Enhanced Items verwenden
1. Klicke auf "Enhanced Items" im Menu
2. Füge Produkte über URL hinzu
3. Nutze AI-generierte Titel-Vorschläge
4. Deine Daten werden automatisch synchronisiert

## Projektstruktur

```
├── src/
│   ├── content.jsx              # Haupt-Content-Script
│   ├── StaggeredMenu.jsx        # React StaggeredMenu Komponente
│   ├── StaggeredMenu.css        # Menu Styles
│   ├── AppWriteConfig.js        # AppWrite Konfiguration
│   ├── AppWriteManager.js       # AppWrite Integration
│   ├── AuthService.js           # Authentifizierung
│   ├── MigrationService.js      # Daten-Migration
│   ├── OfflineService.js        # Offline-Funktionalität
│   ├── LoginUI.jsx              # Login-Interface
│   ├── MigrationUI.jsx          # Migration-Interface
│   └── Enhanced*/               # Enhanced Item Management
├── dist/                        # Build-Output (generiert)
├── manifest.json                # Chrome Extension Manifest
├── package.json                 # NPM Dependencies
└── vite.config.js              # Vite Build-Konfiguration
```

## Verwendung

### Grundfunktionen
1. Gehe zu einer Amazon-Suchergebnisseite (z.B. amazon.de/s?k=laptop)
2. Das StaggeredMenu erscheint oben rechts
3. Unter jedem Produktbild siehst du die Product Bar
4. Klicke auf "Menu" um das animierte Menü zu öffnen

### Cloud-Synchronisation
- Deine Daten werden automatisch in AppWrite gespeichert
- Änderungen werden sofort auf alle deine Geräte synchronisiert
- Bei Offline-Nutzung werden Änderungen lokal gespeichert und später synchronisiert

### AI-Features
- Automatische Titel-Verbesserung mit Mistral AI
- Drei Titel-Vorschläge pro Produkt
- Intelligente Produktdaten-Extraktion

## Technologie-Stack

- **React 18** - UI Framework
- **GSAP** - Animationen
- **Vite** - Build Tool
- **AppWrite** - Cloud Backend & Authentifizierung
- **Mistral AI** - KI-Integration
- **Chrome Extension Manifest V3**

## Konfiguration

### AppWrite Verbindung
Die AppWrite-Konfiguration findest du in `src/AppWriteConfig.js`:

```javascript
export const APPWRITE_CONFIG = {
  endpoint: 'https://appwrite.webklar.com/v1',
  projectId: '6963df38003b96dab5aa',
  databaseId: 'amazon-extension-db',
  collections: {
    enhancedItems: 'amazon-ext-enhanced-items',
    savedProducts: 'amazon-ext-saved-products',
    blacklist: 'amazon_ext_blacklist',
    settings: 'amazon-ext-enhanced-settings',
    migrationStatus: 'amazon-ext-migration-status'
  }
};
```

### Fehlerbehandlung
Die Extension bietet umfassende Fehlerbehandlung:
- **AppWrite Ausfall**: Automatischer Fallback zu localStorage
- **Netzwerkfehler**: Retry-Logik mit exponential backoff
- **Authentifizierung**: Automatische Erneuerung abgelaufener Sessions
- **Deutsche Fehlermeldungen**: Benutzerfreundliche Meldungen

## Debugging

### AppWrite-Verbindung testen
```javascript
// In der Browser-Konsole
window.amazonExtEventBus.emit('appwrite:health-check');
```

### Migration-Status prüfen
```javascript
// Migration-Status anzeigen
window.amazonExtEventBus.emit('migration:status');
```

### Offline-Queue anzeigen
```javascript
// Offline-Operationen anzeigen
window.amazonExtEventBus.emit('offline:queue-status');
```

## Troubleshooting

## Troubleshooting

### CORS-Probleme mit AppWrite

**Problem**: Fehlermeldung "Access to fetch blocked by CORS policy"

**Ursache**: Ihr AppWrite-Server ist nur für `https://localhost` konfiguriert, aber die Extension läuft auf Amazon-Domains.

**Automatische Lösung**: Die Extension erkennt CORS-Fehler automatisch und wechselt zu localStorage:
- ✅ Daten werden automatisch lokal gespeichert
- ✅ Synchronisation erfolgt später, wenn AppWrite verfügbar ist
- ✅ Keine Datenverluste durch CORS-Probleme

**Manuelle Lösung**:
1. AppWrite-Konsole öffnen
2. "Settings" → "Platforms" → "Web Platform" hinzufügen
3. Hostname auf `*.amazon.*` setzen (für alle Amazon-Domains)

### AppWrite-Probleme

**"Invalid query: Attribute not found in schema: userId" Fehler?**
🚨 **KRITISCH**: Ihre Collections fehlt das `userId`-Attribut!

**🔧 AUTOMATISCHE REPARATUR** (Empfohlen):
1. Öffne `test-appwrite-repair-tool.html` in deinem Browser
2. Gib deine AppWrite-Konfiguration ein
3. Klicke auf "Nur Analyse" für eine sichere Überprüfung
4. Bei Problemen: Klicke auf "Reparatur starten" für automatische Behebung
5. Folge den detaillierten Anweisungen im Tool

📖 **Vollständige Anleitung**: Siehe `APPWRITE_REPAIR_TOOL_GUIDE_DE.md`

**Manuelle Lösung** (falls automatische Reparatur fehlschlägt):
1. AppWrite Console öffnen → Databases → amazon-extension-db
2. **Für JEDE Collection** (5 Stück):
   - Auf Collection-Name klicken
   - "Attributes" Tab → "Create Attribute"
   - Type: String, Key: `userId`, Size: 255, Required: ✅
3. **Permissions setzen** (Settings Tab):
   - Create: `users`
   - Read/Update/Delete: `user:$userId`

📖 **Detaillierte manuelle Anleitung**: Siehe `APPWRITE_USERID_ATTRIBUTE_FIX.md`

**401 Unauthorized Fehler?**
1. Gehe zu AppWrite Console → Databases → amazon-extension-db
2. Für jede Collection: Settings → Permissions setzen:
   - Create: `users`
   - Read/Update/Delete: `user:$userId`
3. Siehe `APPWRITE_PERMISSIONS_FIX.md` für detaillierte Anleitung

**Verbindung fehlgeschlagen?**
1. Prüfe deine AppWrite-Konfiguration in `src/AppWriteConfig.js`
2. Stelle sicher, dass dein AppWrite-Server erreichbar ist
3. Überprüfe die Project ID und Endpoint-URL
4. Kontrolliere die Collection-Namen

**Authentifizierung schlägt fehl?**
1. Prüfe deine Login-Daten
2. Stelle sicher, dass Email/Password Auth aktiviert ist
3. Kontrolliere die AppWrite-Berechtigungen
4. Bei Problemen: Logout und erneut anmelden

### Daten-Migration
**Migration hängt?**
1. Öffne die Browser-Konsole für Details
2. Prüfe deine Internetverbindung
3. Stelle sicher, dass AppWrite erreichbar ist
4. Bei Fehlern: Migration über Settings neu starten

### Offline-Modus
**Synchronisation funktioniert nicht?**
1. Prüfe die Netzwerkverbindung
2. Kontrolliere den Offline-Queue-Status
3. Warte auf automatische Synchronisation
4. Bei Problemen: Extension neu laden

### Allgemeine Probleme
**Keine Balken sichtbar?**
1. Prüfe ob du auf einer Amazon-Suchergebnisseite bist
2. Stelle sicher, dass `npm run build` erfolgreich war
3. Reload die Extension in `chrome://extensions/`
4. Prüfe die Konsole auf Fehler

**Menu erscheint nicht?**
1. Prüfe die Console auf Fehler
2. Stelle sicher, dass alle Dependencies installiert sind
3. Rebuild mit `npm run build`
4. Kontrolliere die AppWrite-Verbindung

## Support

Bei Problemen:
1. Prüfe die Browser-Konsole auf Fehlermeldungen
2. Teste die AppWrite-Verbindung
3. Kontrolliere den Migration-Status
4. Prüfe die Offline-Queue bei Synchronisationsproblemen