216 lines
6.9 KiB
Markdown
216 lines
6.9 KiB
Markdown
# 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
|
||
```
|
||
|
||
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
|