Browser-Erweiterung
Setzen Sie eine Markierung auf jede Webseite und lassen Sie das Feedback synchronisieren
Eine Chrome-Erweiterung, mit der Reviewer irgendwo auf eine Live-Webseite klicken, einen Kommentar hinterlassen, einen kontextbezogenen Screenshot anhängen und das Feedback in Echtzeit mit einem gemeinsamen Dashboard synchronisieren können.
Das Design-Review im Web hat sich seit Jahren nicht weiterentwickelt. Der Zyklus ist überall gleich. Reviewer macht einen Screenshot. Markiert ihn in Preview oder Figma. Fügt ihn mit einem Kommentar in Slack ein. Designer sucht das ursprüngliche Element. Wiederholen für die nächsten vierzig Probleme.
Das Briefing war ein Werkzeug, mit dem Reviewer Feedback direkt in der Seite hinterlassen können. Dort klicken, wo das Problem ist, die Notiz tippen, den umgebenden Kontext erfassen, das Ergebnis mit einem gemeinsamen Dashboard synchronisieren. Kein App-Wechsel für den Reviewer, keine Detektivarbeit für den Designer.
Was wir gebaut haben
1. Overlay zum Markieren an beliebiger Stelle
Die Erweiterung blendet ein Overlay über die gerade geöffnete Seite. Klicken Sie irgendwo, landet eine Markierung genau an diesem Punkt und ein Kommentarfeld öffnet sich. Die Position der Markierung wird relativ zum DOM-Element darunter gespeichert, sodass sie die meisten Layout-Änderungen übersteht.
- Markierungen per Klick überall auf der Seite platzieren
- Markierungsposition relativ zum DOM-Element gespeichert
- Kontextbezogener Screenshot automatisch pro Markierung erfasst
- Kommentarfeld mit Rich-Text- und Anhangunterstützung
2. Echtzeit-Synchronisierung mit einem gemeinsamen Dashboard
Jede Markierung wird in dem Moment mit einem Web-Dashboard synchronisiert, in dem sie erstellt wird. Der Rest des Teams sieht neue Markierungen erscheinen, ohne die Seite neu zu laden. Die Triage findet dort statt, wobei Statusänderungen zurück in die Erweiterung fließen.
- Echtzeit-Synchronisierung zwischen Erweiterung und Web-Dashboard
- Triage-Ansicht mit Statusverlauf pro Markierung
- Filtern nach Seite, Status, zuständiger Person
- Benachrichtigung, wenn eine von Ihnen gemeldete Markierung gelöst ist
3. Tastaturkürzel und Erfassungsablauf
Reviewer wollen nicht mit der Maus herumfahren. Tastenkürzel zum Öffnen des Panels, zum Erfassen und zum Absenden. Der Erfassungsablauf dauert zwei Sekunden von der Idee bis zum protokollierten Feedback.
- Tastenkürzel zum Öffnen des schwebenden Panels
- Tastenkürzel zum Erfassen und Absenden, ohne die Tastatur zu verlassen
- Inline-Vorschau des Screenshots vor dem Absenden
Tech-Stack und warum wir ihn gewählt haben
Browser-Erweiterungen sind eingeschränkte Umgebungen. Bundle-Größe, CSP und Speicherlimits treiben die Entscheidungen.
- Manifest V3 für die Chrome-Erweiterung. Das neue Berechtigungsmodell und die Service-Worker-Architektur sind der einzige Weg nach vorn; v2-Erweiterungen sind veraltet. Wir haben v3 sauber übernommen, statt gegen die Einschränkungen zu kämpfen.
- esbuild für das Bundling. Schneller als webpack, kleinere Ausgabe. Für eine Erweiterung, deren gesamtes Bundle auf jeder Seite geladen werden muss, zählt der Größenunterschied.
- Sharp für die Icon-Generierung. Wir erzeugen den Icon-Satz automatisch aus einer einzigen SVG-Quelle, sodass das Hinzufügen einer neuen Icon-Größe ein einziger Befehl ist.
- Supabase für das Backend. Auth, Postgres, Speicher und Echtzeit-Kanäle in einem. Row-Level-Security-Policies regeln die teambezogenen Zugriffsregeln, ohne dass ein einziger Endpunkt geschrieben werden muss. Über die Echtzeit-Kanäle bleiben Erweiterung und Dashboard synchron.
- Next.js für das Web-Dashboard. Serverseitig gerenderte Triage-Ansicht, App Router für den Rest. Das Dashboard ist die schwere Oberfläche, die Erweiterung bleibt minimal.
- Framer Motion für die Dashboard-Interaktionen. Markierungen tauchen mit einer sanften Animation auf, wenn sie ankommen, Statuswechsel fühlen sich wie Zustandsänderungen an statt wie Neuladen.
- Lucide-Icons durchgängig. Einheitliche Strichstärke, leichtgewichtiges Bundle, jedes Icon, das wir brauchten, war bereits im Satz enthalten.
Ergebnis
Live über mehrere Teams hinweg. Der Screenshot-und-Einfügen-Ablauf ist dort verschwunden, wo die Erweiterung übernommen wurde.
Häufig gestellte Fragen
Was passiert, wenn sich das Seitenlayout ändert, nachdem eine Markierung hinterlassen wurde?
Markierungen verankern sich an dem DOM-Element, auf dem sie platziert wurden, nicht an der absoluten Pixelposition. Kleine Layout-Änderungen werden sauber überstanden. Größere Umbauten brechen den Anker natürlich; in diesem Fall greift die Markierung auf den Screenshot zurück, der erhalten bleibt.
Funktioniert das auf authentifizierten Seiten?
Ja. Die Erweiterung läuft in derselben Sitzung wie der Nutzer, sodass jede Seite, die er sehen kann, auch markiert werden kann. Die Screenshots werden privat und teambezogen gespeichert, nicht bezogen auf die Herkunft der Seite.
Warum eine Chrome-Erweiterung und kein gehostetes Overlay?
Gehostete Overlays brauchen ein Script-Tag auf der Website des Kunden. Das funktioniert nur auf Properties, die der Kunde kontrolliert. Die Erweiterung funktioniert auf jeder URL, auf der sich der Reviewer befindet, einschließlich Staging-Umgebungen, Drittanbieter-Tools und Produktionsseiten, die das Team prüft.