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

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

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: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