TL;DR Crawler Chrome-Erweiterungs-Builder

Erstelle eine Chrome-Erweiterung (Manifest V3) namens "TL;DR Crawler", die auf jeder normalen Webseite funktioniert. WAS SIE TUT Klicke auf das Toolbar-Symbol: Eine gezeichnete Spinne erscheint auf der aktuellen Seite, folgt deinem Cursor (auch beim Scrollen), liest den Text, über den sie läuft, und erstellt eine kurze TL;DR in einem schwebenden Panel. Klicke erneut auf das Symbol: Alles verschwindet und die Seite ist genau wie zuvor. 1. UMSCHALTEN - background.js: chrome.action.onClicked injiziert content.js mit chrome.scripting.executeScript. - content.js prüft ein globales Flag. Wenn der Crawler bereits läuft, fährt er herunter und räumt auf. Andernfalls startet er. Nur eine Instanz pro Tab, immer. 2. TEXT FINDEN - Finde den Hauptlesebereich: Bevorzuge <article> oder <main>, andernfalls das Element mit dem meisten Absatztext. Überspringe nav, header, footer, aside, Menüs, Formulare, Code, Werbung und ausgeblendete Elemente. - Sammle Textblöcke (p, li, blockquote, h2-h4) und teile sie in Sätze. Speichere jeden Satz als DOM-Range (Sätze können Links und fetten Text umfassen, also NICHT in Elemente verpacken). - Beobachte den Bereich mit einem entprellten MutationObserver (1s), um später geladenen Text aufzunehmen (unendliches Scrollen, Lazy Content). 3. KERNSÄTZE AUSWÄHLEN - Bewerte jeden Satz: +2 für Ziffern, +2 für %, $, €, Million, Milliarde; +1,5 für Wörter wie erste, Rekord, Start, Ankündigung, neu, nur, größte, schnellste, warnt, erhöht, senkt; +0,3 pro großgeschriebenem Namen (max +2); -2 wenn unter 40 oder über 260 Zeichen. - Markiere die oberen 25% als Kernsätze (min 5, max 80), verteilt, sodass die meisten Absätze einen bekommen. - Zusammenfassungen, max 9 Wörter pro Satz: - Wenn ein API-Schlüssel gesetzt ist: Sende alle Kernsätze in EINER Anfrage an Claude und bitte um ein JSON-Array mit kurzen, einfachen Zusammenfassungen (max 9 Wörter, Zahlen und Namen exakt beibehalten, keine Übertreibungen). Fordere erneut in Stapeln an, wenn neuer Text erscheint. - Ohne Schlüssel: Fallback-Zusammenfassung = der Satz ohne Füllwörter am Anfang (und, aber, jedoch, außerdem, laut), abgeschnitten an einer Wortgrenze mit "…". 4. DIE SPINNE - Shadow-DOM-Host im Dokumentstamm mit einem Vollbild-<canvas> (pointer-events: none, z-index 2147483646) und dem Panel. - Aussehen: kleiner abgerundeter Rechteckkörper, Ellipsen-Hinterleib, Kopf mit zwei weißen Augen, Umrisse in #5ab8ff. 8 Beine als 3px blaue Linien mit rosa (#ff4f7a) Gelenkpunkten, zwei Segmente jeweils mit inverser Kinematik, Knie nach außen gebogen. - Gang: zwei abwechselnde Beingruppen. Ein Fuß tritt nur, wenn er ~80px von seiner idealen Position entfernt ist und die andere Gruppe fest steht. Schritte dauern 0,13s mit einem kleinen Anheben, Landung leicht voraus in Gehrichtung. - Bewegung: Ziel = Cursorposition + Scroll, folgt also beim Scrollen. Max ~420 px/s, sanfte Beschleunigung, stoppt ~40px vor dem Cursor, dreht sich sanft in seine Richtung. Wenn der Cursor 8s inaktiv ist, wandert sie im Viewport umher. - requestAnimationFrame mit festem 1/120s-Physikschritt. Unterstützt devicePixelRatio und Fenstergrößenänderung. 5. CRAWLING - Alle 80ms und bei jeder Fußlandung den Text unter der Spinne mit document.caretRangeFromPoint finden (eigene Elemente der Erweiterung ignorieren). - Wenn dieser Punkt in einem noch nicht gefundenen Kernsatz liegt: mit der CSS Custom Highlight API hervorheben (::highlight(tldr-found) mit weichem gelbem Hintergrund) und seine Zusammenfassung zum Panel hinzufügen. - Wenn ein Fuß auf einem normalen Wort landet: in ~25% der Fälle genau dieses Wort glitchen. Nur dieses Wort in einen Span verpacken (es ist ein einzelner Textknoten, also sicher) und einen zufälligen Effekt anwenden: Monospace-Schrift, blaue Umrandung, blaue Hervorhebung, leichte Drehung, breite Buchstabenabstände, Unschärfe oder Großbuchstaben. Max 2 Effekte pro Wort. Jede Änderung aufzeichnen, damit sie rückgängig gemacht werden kann. 6. PANEL - Oben rechts, per Kopfzeile ziehbar, im Shadow-DOM, damit Site-CSS es nicht beeinflussen kann. - Dunkel (#16181c), Mono-Titel "TL;DR" in Gelb (#ffd166), ein "gefunden / gesamt"-Zähler, ein rosa Fortschrittsbalken und eine nummerierte Liste in Artikelreihenfolge. Der neueste Eintrag blinkt gelb und die Liste scrollt automatisch zu ihm. Die Liste scrollt innerhalb einer maximalen Höhe. - Buttons: "TL;DR kopieren" (Klartext in die Zwischenablage), "Neustart" (löscht Hervorhebungen, Glitches und die Liste) und "Schließen" (vollständiges Herunterfahren). - Wenn ein Schlüssel gesetzt ist, "TL;DR mit Claude schreiben" hinzufügen: sendet alle gefundenen Sätze und gibt 3 kurze Zeilen zurück, die nur deren Fakten verwenden, Zahlen unverändert. Zeige einen "Denke nach..."-Zustand, dann die Antwort unter der Liste. 7. API-SCHLÜSSEL - options.html: ein Feld für den Anthropic-API-Schlüssel des Benutzers und einen Modellnamen, gespeichert in chrome.storage.local. - Alle API-Aufrufe laufen über background.js mit fetch zu https://api.anthropic.com, mit Headern x-api-key, anthropic-version: 2023-06-01 und content-type: application/json. - Fehler leise behandeln: Wenn ein Aufruf fehlschlägt, Fallback-Zusammenfassungen behalten und eine kleine "KI nicht verfügbar"-Notiz zeigen. 8. QUALITÄTSREGELN - Scrollen, Klicks, Links oder Textauswahl auf der Site niemals unterbrechen. - Vollständige Bereinigung beim Herunterfahren: Canvas, Panel, Hervorhebungen, umwickelte Wort-Spans, Inline-Stile, Listener, Observer, Timer. - prefers-reduced-motion: keine Glitches, langsameres Gehen. - Reines JavaScript, keine Bibliotheken. Dateien: manifest.json, background.js, content.js, options.html, options.js, Icons (16, 48, 128). - Berechtigungen: activeTab, scripting, storage. Host-Berechtigung: https://api.anthropic.com/*. Am Ende Installationsschritte angeben: chrome://extensions öffnen, Entwicklermodus aktivieren, "Entpackte Erweiterung laden" klicken, Ordner auswählen, dann Optionen öffnen und den API-Schlüssel einfügen.