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
2. Mistral AI API Key (optional): Für AI-Titel-Generierung von 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:

npm install

2. AppWrite Konfiguration anpassen:

   • Öffne src/AppWriteConfig.js
   • Trage deine AppWrite-Daten ein:

   export const APPWRITE_CONFIG = {
     endpoint: 'https://dein-appwrite-server.com/v1',
     projectId: 'deine-project-id',
     databaseId: 'amazon-extension-db'
   };
   

3. Build erstellen:

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

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:

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

// In der Browser-Konsole
window.amazonExtEventBus.emit('appwrite:health-check');

Migration-Status prüfen

// Migration-Status anzeigen
window.amazonExtEventBus.emit('migration:status');

Offline-Queue anzeigen

// 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