Extension & Server Projekt

Dieses Projekt besteht aus drei Hauptkomponenten:

Extension

• Zweck: Browser-Extension mit JWT-basierter Authentifizierung
• Speicherort: /Extension
• Empfängt JWT von der Web-App und kommuniziert mit dem Backend

Server (React Web App)

• Zweck: Login-Interface mit Appwrite-Authentifizierung
• Speicherort: /Server
• Basiert auf React mit Appwrite-Integration
• Sendet JWT an die Extension nach erfolgreichem Login

Backend

• Zweck: Serverseitige JWT-Validierung und API-Endpoints
• Speicherort: /Server/backend
• Node/Express Server mit Appwrite-Integration
• Validiert JWTs und führt privilegierte Aktionen aus

Getting Started

1. Backend starten

cd Server\backend
npm install
npm run dev

Das Backend läuft auf http://localhost:3000

Wichtig: Vor dem Start APPWRITE_API_KEY in Server/backend/.env eintragen!

2. React Web App starten

cd Server
npm install
npm run dev

Die Web-App läuft auf http://localhost:5173 (oder einem anderen Port, den Vite anzeigt)

Wichtig: Stelle sicher, dass Server/.env die korrekten Appwrite-Konfigurationswerte enthält:

• VITE_APPWRITE_ENDPOINT
• VITE_APPWRITE_PROJECT_ID

3. Extension laden

1. Öffne Chrome/Edge und gehe zu chrome://extensions/ (oder edge://extensions/)
2. Aktiviere "Entwicklermodus" (oben rechts)
3. Klicke auf "Entpackte Erweiterung laden"
4. Wähle den Extension/ Ordner aus
5. Die Extension sollte jetzt geladen sein

4. Testen

1. Öffne die Web-App im Browser (http://localhost:5173)
2. Du siehst den Login-Sperrbildschirm
3. Logge dich mit deinen Appwrite-Credentials ein
4. Nach erfolgreichem Login verschwindet der Sperrbildschirm
5. Öffne die Extension (Klick auf das Extension-Icon)
6. Du solltest "Authed: true" sehen
7. Klicke auf "Test action" um die Backend-Verbindung zu testen

Projektstruktur

eship/
├── Extension/              # Browser-Extension
│   ├── manifest.json
│   ├── background.js
│   ├── content-script.js
│   ├── popup.html
│   └── popup.js
├── Server/                 # React Web App
│   ├── src/
│   │   └── App.jsx        # Login-Sperrbildschirm
│   ├── .env               # Vite Env-Variablen
│   └── backend/            # Node/Express Backend
│       ├── server.js
│       ├── .env           # Backend Env-Variablen
│       └── package.json
└── setup/                  # Setup & Konfiguration

Konfiguration

Backend .env (Server/backend/.env)

APPWRITE_ENDPOINT=https://appwrite.webklar.com/v1
APPWRITE_PROJECT_ID=696b82bb0036d2e547ad
APPWRITE_API_KEY=<HIER_DEIN_API_KEY_EINTRAGEN>
PORT=3000

React App .env (Server/.env)

VITE_APPWRITE_ENDPOINT=https://appwrite.webklar.com/v1
VITE_APPWRITE_PROJECT_ID=696b82bb0036d2e547ad

Extension Backend URL (Extension/background.js)

const BACKEND_URL = "http://localhost:3000"; // Anpassen falls nötig