199 lines
5.6 KiB
Markdown
199 lines
5.6 KiB
Markdown
# Facebook Post Tracker
|
||
|
||
Eine Chrome/Firefox-Extension mit Docker-Backend 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:
|
||
|
||
1. Öffne `http://localhost:8080`
|
||
2. Wähle dein aktuelles Profil aus
|
||
3. **Offene Beiträge**: Zeigt alle Beiträge, die noch nicht von allen Profilen abgehakt wurden
|
||
4. **Alle Beiträge**: Zeigt alle erfassten Beiträge
|
||
5. Klicke auf "Beitrag öffnen & abhaken", um:
|
||
- Den Beitrag in neuem Tab zu öffnen
|
||
- Automatisch für dein Profil abzuhaken
|
||
|
||
### Daily-Bookmarks-Seite
|
||
|
||
- Öffne `http://localhost:8080/daily-bookmarks.html` für eine eigenständige Bookmark-Übersicht
|
||
- Lege Links mit dynamischen Platzhaltern an (z. B. `{{day}}`, `{{date-1}}`)
|
||
- Markiere Bookmarks einmal pro Tag als erledigt; der Status wird in der SQLite-DB gespeichert
|
||
- Links werden pro gewähltem Tag aufgelöst, z. B. `https://www.test.de/tag-{{day}}/`
|
||
|
||
## 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
|
||
- **Extension**: Manifest V3 (Chrome & Firefox kompatibel)
|
||
- **Deployment**: Docker, docker-compose
|
||
|
||
## Lizenz
|
||
|
||
MIT
|