# Facebook Post Tracker

Eine Chrome/Firefox-Extension mit Docker-Backend und Single-Page-Webinterface zum Verwalten und Abhaken von Facebook-Beiträgen über mehrere Browser-Profile hinweg.

## Features

- ✅ **Browser-Extension**: Fügt jedem Facebook-Beitrag Tracking-Funktionalität hinzu
- 📊 **Multi-Profile-Support**: Verwalte 5 verschiedene Browser-Profile
- 🌐 **Web-Interface**: Übersicht über alle zu bearbeitenden Beiträge
- 🔄 **Auto-Check**: Beiträge werden automatisch beim Öffnen abgehakt
- 🐳 **Docker-Setup**: Einfaches Backend-Deployment

## Systemarchitektur

```
┌─────────────────┐
│  Browser        │
│  Extension      │◄─────┐
└────────┬────────┘      │
         │               │
         ▼               │
┌─────────────────┐      │
│  Docker Backend │      │
│  (Node.js API)  │      │
│  + SQLite DB    │      │
└────────┬────────┘      │
         │               │
         ▼               │
┌─────────────────┐      │
│  Web Interface  │──────┘
└─────────────────┘
```

## Installation

### 1. Backend starten (Docker)

```bash
# In das Projektverzeichnis wechseln
cd /mnt/c/fb

# Docker Container bauen und starten
docker-compose up -d

# Logs ansehen (optional)
docker-compose logs -f
```

**Login-Schutz aktivieren:** Setze Benutzername/Passwort in `docker-compose.yml` via `AUTH_USERNAME` und `AUTH_PASSWORD`. Beispiel (bereits eingetragen):
```
  environment:
    - AUTH_USERNAME=admin
    - AUTH_PASSWORD=changeme
```
Denke daran, eigene Werte zu hinterlegen.

Das Backend läuft nun auf `http://localhost:3000`
Das Web-Interface ist erreichbar unter `http://localhost:8080`

### 2. Browser-Extension installieren

#### Chrome:
1. Öffne `chrome://extensions/`
2. Aktiviere "Entwicklermodus" (oben rechts)
3. Klicke auf "Entpackte Erweiterung laden"
4. Wähle den Ordner `/mnt/c/fb/extension`

#### Firefox:
1. Öffne `about:debugging#/runtime/this-firefox`
2. Klicke auf "Temporäres Add-on laden"
3. Wähle die Datei `/mnt/c/fb/extension/manifest.json`

### 3. Extension konfigurieren

1. Klicke auf das Extension-Icon 📋 in der Browser-Toolbar
2. Wähle dein aktuelles Profil (1-5) aus
3. Klicke auf "Speichern"

## Nutzung

### In der Browser-Extension (auf Facebook):

1. **Beitrag hinzufügen**: Bei jedem Facebook-Beitrag erscheint automatisch ein Tracking-UI
   - Gib die Anzahl ein (1-5), wie viele Profile den Beitrag abhaken sollen
   - Klicke auf "Hinzufügen"
   - Der Beitrag wird automatisch für das aktuelle Profil abgehakt

2. **Beitrag abhaken**: Bei bereits getrackten Beiträgen
   - Siehst du den Status: `X/Y Profile ✓/✗`
   - Klicke auf "Abhaken", wenn noch nicht für dein Profil erledigt

### Im Web-Interface (SPA):

Öffne `http://localhost:8080` und nutze die Navigation oben, um zwischen den Views zu wechseln. Die SPA-Views hängen am Query-Parameter `view`:

- `?view=posts` (Standard): Offene/alle Beiträge
- `?view=dashboard`: Kennzahlen & Statistiken
- `?view=settings`: Einstellungen/Schwellwerte
- `?view=bookmarks`: Bookmark-Suche (nicht täglich)
- `?view=automation`: Request-Automationen (HTTP/Email/Flows)
- `?view=daily-bookmarks`: Daily Bookmarks (tägliche Liste mit Platzhaltern)

Direktlinks wie `automation.html` oder `daily-bookmarks.html` leiten nur noch auf die passenden SPA-Views um.

### Daily Bookmarks (SPA-View)

- View: `http://localhost:8080/?view=daily-bookmarks`
- Lege Links mit dynamischen Platzhaltern an (z. B. `{{day}}`, `{{date-1}}`, `{{counter:123}}`)
- Markiere Bookmarks einmal pro Tag als erledigt; Status landet in SQLite
- Links werden pro gewähltem Tag aufgelöst, z. B. `https://www.test.de/tag-{{day}}/`

### Automationen (SPA-View)

- View: `http://localhost:8080/?view=automation`
- HTTP-/Email-/Flow-Automationen mit Platzhaltern, Intervalen, Jitter
- Echtzeit-Updates via SSE (`/api/events`)

## API-Endpunkte

Das Backend stellt folgende REST-API bereit:

- `GET /api/posts` - Alle Beiträge abrufen
- `GET /api/posts/by-url?url=...` - Beitrag über URL abrufen
- `POST /api/posts` - Neuen Beitrag erstellen
- `POST /api/posts/:id/check` - Beitrag für Profil abhaken
- `POST /api/check-by-url` - Beitrag über URL abhaken
- `DELETE /api/posts/:id` - Beitrag löschen

## Datenbankstruktur

```sql
posts:
  - id (TEXT, PRIMARY KEY)
  - url (TEXT, UNIQUE)
  - title (TEXT)
  - target_count (INTEGER)
  - created_at (DATETIME)

checks:
  - id (INTEGER, PRIMARY KEY)
  - post_id (TEXT, FOREIGN KEY)
  - profile_number (INTEGER)
  - checked_at (DATETIME)
  - UNIQUE(post_id, profile_number)
```

## Docker-Befehle

```bash
# Container starten
docker-compose up -d

# Container stoppen
docker-compose down

# Logs ansehen
docker-compose logs -f

# Container neu bauen
docker-compose build

# Datenbank zurücksetzen (ACHTUNG: Löscht alle Daten!)
docker-compose down -v
```

## Entwicklung

### Backend lokal entwickeln (ohne Docker):

```bash
cd backend
npm install
npm run dev
```

### Extension während Entwicklung neu laden:

- **Chrome**: Gehe zu `chrome://extensions/` und klicke auf das Reload-Symbol
- **Firefox**: Gehe zu `about:debugging` und klicke auf "Neu laden"

## Troubleshooting

### Backend nicht erreichbar

- Prüfe, ob Docker läuft: `docker ps`
- Prüfe die Logs: `docker-compose logs backend`
- Stelle sicher, dass Port 3000 nicht bereits belegt ist

### Extension funktioniert nicht

- Öffne die Browser-Konsole (F12) und prüfe auf Fehler
- Stelle sicher, dass das Backend läuft
- Lade die Extension neu
- Prüfe, ob du auf Facebook.com bist

### CORS-Fehler

- Das Backend hat CORS aktiviert
- Stelle sicher, dass du `http://localhost:3000` verwendest (nicht `127.0.0.1`)

### Icons fehlen in Extension

- Die Extension verwendet Emoji-Icons als Fallback
- Für richtige Icons kannst du PNG-Dateien in den Größen 16x16, 48x48, 128x128 erstellen und in `extension/icons/` ablegen

## Technologie-Stack

- **Backend**: Node.js, Express, SQLite (better-sqlite3)
- **Web-Interface**: Vanilla JavaScript, HTML, CSS (SPA)
- **Extension**: Manifest V3 (Chrome & Firefox kompatibel)
- **Deployment**: Docker, docker-compose

## Updates & Abhängigkeiten

- **NPM-Dependencies (Backend)**: `cd backend && npm install && npm outdated` prüfen. Upgrade per `npm update` oder gezielt Versionen anheben, anschließend Tests/Manuallauf.
- **Frontend-Libs**: `web/vendor/list.min.js` wird lokal gebundled; bei Update die neue Version in `web/vendor` legen und Caching beachten.
- **Browser-Extension**: Manifest V3, Icons/Assets im Ordner `extension/`. Bei Browser-Updates ggf. Permissions/Manifest anpassen, danach in Chrome/Firefox neu laden.
- **Docker-Images**: `docker-compose build` neu bauen nach Dependency-Updates. Basis-Images im `backend/Dockerfile` prüfen.
- **SPA-Views**: Navigation über `?view=`; direkte HTML-Seiten (`automation.html`, `daily-bookmarks.html`, `bookmarks.html`, `dashboard.html`, `settings.html`) sind Redirect-Stubs. Neue Views sollten in `index.html` + `app.js` (Navigation) ergänzt werden.

## Lizenz

MIT