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)

# 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

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
• Extension: Manifest V3 (Chrome & Firefox kompatibel)
• Deployment: Docker, docker-compose

Lizenz

MIT