# EShip Browser Extension

Chrome Extension (Manifest V3) fuer die Authentifizierung und Tool-Verwaltung der EShip Web-App.

## Funktionen

- **Authentifizierung**: Login via Appwrite (Email/Password)
- **Website-Schutz**: Blockiert die Web-App fuer nicht-authentifizierte Benutzer
- **Tools-System**: Aktivierbare Tools mit individuellen Einstellungen
- **Live-Updates**: Einstellungen werden sofort auf der Website angewendet

## Projektstruktur

```
Extension/
├── manifest.json           # Chrome Extension Manifest (MV3)
├── config.js               # Appwrite Konfiguration
├── background/
│   └── service-worker.js   # Background Service Worker
├── popup/
│   ├── popup.html          # Popup UI
│   ├── popup.css           # Popup Styles
│   └── popup.js            # Popup Logic
├── content/
│   └── content-script.js   # Content Script fuer Website
└── lib/
    └── appwrite.min.js     # Appwrite SDK Bundle
```

## Installation

### 1. Appwrite API Key erstellen

**WICHTIG**: Du musst einen API Key in Appwrite erstellen:

1. Gehe zu https://cloud.appwrite.io
2. Waehle dein Projekt
3. Settings > API Keys > "Create API Key"
4. Scopes: `users.read`, `users.write`, `sessions.write`
5. Kopiere den API Key (wird nur einmal angezeigt!)

Siehe auch: `setup/API_KEY_SETUP.md` fuer detaillierte Anleitung.

### 2. Extension konfigurieren

Bearbeite `Extension/config.js`:

```javascript
var APPWRITE_CONFIG = {
  endpoint: 'https://cloud.appwrite.io/v1',
  projectId: '696b82bb0036d2e547ad',
  apiKey: 'DEIN_API_KEY_HIER'  // WICHTIG: API Key hier einfuegen
};
```

### 3. Extension in Chrome laden

1. Oeffne Chrome und navigiere zu `chrome://extensions`
2. Aktiviere den **Entwicklermodus** (Toggle oben rechts)
3. Klicke auf **Entpackte Erweiterung laden**
4. Waehle den `Extension/` Ordner aus
5. Die Extension erscheint in der Toolbar

### 4. Server starten

```bash
cd Server
npm install
npm run dev
```

Der Server startet unter `http://localhost:5173`

## Testen

### Auth-Flow testen

1. **Ohne Login**: 
   - Oeffne `http://localhost:5173`
   - Die Seite zeigt einen "Zugriff gesperrt" Bildschirm

2. **Login durchfuehren**:
   - Klicke auf das Extension-Icon in der Toolbar
   - Gib deine Appwrite-Zugangsdaten ein
   - Klicke auf "Anmelden"
   - Nach erfolgreichem Login wird die Website automatisch geoeffnet

3. **Nach Login**:
   - Die Website ist voll zugaenglich
   - Das Extension-Popup zeigt das Tools-Menu

### Tools testen

1. Oeffne das Extension-Popup (nach Login)
2. Aktiviere das Tool "Preise hervorheben"
3. Auf der Website werden alle `.price` Elemente mit rotem Rahmen hervorgehoben
4. Aendere den Selector oder die Farbe in den Tool-Einstellungen
5. Die Aenderungen werden sofort angewendet

### Demo-Preise

Die Web-App enthaelt Demo-Preiselemente in der unteren rechten Ecke zum Testen des Highlight-Tools.

## Tools-Registry

Tools werden in `background/service-worker.js` definiert:

```javascript
const DEFAULT_TOOLS = [
  {
    id: 'highlight_prices',
    name: 'Preise hervorheben',
    enabled: false,
    settings: {
      selector: '.price',
      borderColor: '#ff0000',
      borderWidth: '2px'
    }
  }
];
```

### Neues Tool hinzufuegen

1. Fuege das Tool zur `DEFAULT_TOOLS` Liste hinzu
2. Implementiere die Logik in `content/content-script.js`:
   ```javascript
   function applyTool(tool) {
     switch (tool.id) {
       case 'dein_tool_id':
         applyDeinTool(tool.settings);
         break;
     }
   }
   ```

## Message-Kommunikation

### Popup <-> Service Worker

| Action | Beschreibung |
|--------|--------------|
| `CHECK_AUTH` | Prueft Auth-Status |
| `LOGIN` | Login mit Email/Password |
| `LOGOUT` | Beendet Session |
| `GET_SETTINGS` | Laedt Tool-Einstellungen |
| `SAVE_SETTINGS` | Speichert Tool-Einstellungen |

### Service Worker <-> Content Script

| Action | Beschreibung |
|--------|--------------|
| `SETTINGS_UPDATED` | Neue Tool-Einstellungen |
| `AUTH_CHANGED` | Auth-Status geaendert |

## Sicherheit

- Passwoerter werden **nie** im Klartext gespeichert
- Authentifizierung laeuft vollstaendig ueber Appwrite Sessions
- Session-Cookies sind HTTP-only und werden von Appwrite verwaltet
- Tool-Einstellungen werden in `chrome.storage.sync` gespeichert

## Fehlerbehebung

### Extension funktioniert nicht

1. Pruefe die Browser-Konsole auf Fehler
2. Oeffne `chrome://extensions` und klicke auf "Service Worker" bei der Extension
3. Pruefe die Konsole des Service Workers

### Login schlaegt fehl

1. Pruefe die Appwrite-Konfiguration in `config.js`
2. Stelle sicher, dass der **API Key** gesetzt ist
3. Pruefe, ob der API Key die richtigen Scopes hat (`users.read`, `users.write`, `sessions.write`)
4. Stelle sicher, dass der Appwrite-Benutzer existiert
5. Pruefe, ob die Appwrite-Plattform-Einstellungen den Extension-Zugriff erlauben

### Website bleibt blockiert

1. Lade die Website neu nach dem Login
2. Pruefe, ob die URL in `manifest.json` unter `content_scripts.matches` steht
3. Pruefe die Content-Script-Konsole (F12 auf der Website)

## Bekannte Einschraenkungen

- Die Extension funktioniert nur auf den konfigurierten URLs (localhost:5173, localhost:3000)
- Fuer Produktions-URLs muss `manifest.json` angepasst werden
- Icons sind nicht enthalten (Chrome verwendet Standard-Icon)