6.9 KiB
6.9 KiB
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)
# 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:
- Öffne
chrome://extensions/ - Aktiviere "Entwicklermodus" (oben rechts)
- Klicke auf "Entpackte Erweiterung laden"
- Wähle den Ordner
/mnt/c/fb/extension
Firefox:
- Öffne
about:debugging#/runtime/this-firefox - Klicke auf "Temporäres Add-on laden"
- Wähle die Datei
/mnt/c/fb/extension/manifest.json
3. Extension konfigurieren
- Klicke auf das Extension-Icon 📋 in der Browser-Toolbar
- Wähle dein aktuelles Profil (1-5) aus
- Klicke auf "Speichern"
Nutzung
In der Browser-Extension (auf Facebook):
-
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
-
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
- Siehst du den Status:
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 abrufenGET /api/posts/by-url?url=...- Beitrag über URL abrufenPOST /api/posts- Neuen Beitrag erstellenPOST /api/posts/:id/check- Beitrag für Profil abhakenPOST /api/check-by-url- Beitrag über URL abhakenDELETE /api/posts/:id- Beitrag löschen
Datenbankstruktur
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
# 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):
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:debuggingund 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:3000verwendest (nicht127.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 outdatedprüfen. Upgrade pernpm updateoder gezielt Versionen anheben, anschließend Tests/Manuallauf. - Frontend-Libs:
web/vendor/list.min.jswird lokal gebundled; bei Update die neue Version inweb/vendorlegen 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 buildneu bauen nach Dependency-Updates. Basis-Images imbackend/Dockerfileprü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 inindex.html+app.js(Navigation) ergänzt werden.
Lizenz
MIT