☰

Der universelle Komponenten-Analysator 🔬 (v21.4 - Verbessert)

Umfassendes Update: Optimierter Prompt-Header für bessere KI-Interaktion, erweiterte CSS-Eigenschaften für tiefere Analyse und verfeinerte HTML-Struktur-Extraktion.

作者
Moritz Baumeister
日安装量
0
总安装量
3
评分
0 0 0
版本
21.4
创建于
2025-06-08
更新于
2025-06-11
大小
43.3 KB
许可证
MIT
适用于
所有网站

🤔 Was ist das Problem?

Als Entwickler, Datenanalyst oder KI-Enthusiast stehst du oft vor einer Herausforderung: Du musst die genaue technische Blaupause eines Webseiten-Elements verstehen, um es nachzubauen, zu analysieren oder einem LLM zu beschreiben. Das manuelle Inspizieren von komplexen HTML-Strukturen und CSS-Regeln in den Entwickler-Tools ist mühsam, fehleranfällig und extrem zeitaufwendig – besonders wenn du mehrere Elemente vergleichen oder maschinenlesbare Daten für die Weiterverarbeitung gewinnen willst.

✨ Die Lösung: Ein chirurgisches Analyse-Werkzeug für JEDE Webseite (v21.4)

Dieses UserScript ist ein professioneller Komponenten-Analysator, der auf jeder Webseite funktioniert. Es verwandelt deinen Browser in ein interaktives Labor, mit dem du jedes beliebige Element mit einem Klick "sezieren" und eine extrem detaillierte, hochkomprimierte und maschinenlesbare Text-Ausgabe im JSONL-Format erzeugen kannst. Dieses Format ist perfekt darauf zugeschnitten, von Large Language Models (LLMs) verstanden und direkt verarbeitet zu werden.

🚀 Die Features im Überblick

Dieses Tool geht weit über einfaches "Scraping" hinaus und bietet einzigartige Funktionen für den anspruchsvollen Power-User:

  • 🌐 Universelle Kompatibilität: Dank @match *://*/* läuft dieses Skript auf JEDER Webseite im Internet, von alten Foren bis zu modernen Web-Apps. Es ist nicht auf eine bestimmte Seite beschränkt.

  • 🎯 Präziser Element-Picker: Ein Klick auf den frei beweglichen Pipetten-Button am Bildschirmrand aktiviert den Auswahlmodus. Dein Cursor wird zum Skalpell, mit dem du pixelgenau das gewünschte Element anvisieren kannst.

  • 📋 Detaillierte Element-Blaupause im JSONL-Format: Mit einem Klick erhältst du einen kompletten technischen Steckbrief des Elements, der direkt in deine Zwischenablage kopiert wird. Dieser "Blueprint" ist im JSONL-Format (JSON Lines) strukturiert und enthält:

    • Globale Metadaten: Die erste Zeile der Ausgabe enthält allgemeine Informationen zur Seite (URL, Titel, Zeitstempel, HTML-Sprache, Favicon, URL-Parameter, Schema.org-Typen), die dem LLM den Gesamtkontext liefern.
    • Element-Identifikation: tagName, id, classes (bereinigt), und ein präziser, robuster domPath (CSS-Selektor-Pfad) für eine eindeutige Lokalisierung.
    • Visuelle Eigenschaften: geometry (Position, Größe, Sichtbarkeit im Viewport) und umfassende css Styles (nur die vom Standard abweichenden und relevantesten Eigenschaften, wie Layout, Typografie, Hintergrund, Box-Modell, Transformationen und mehr – eine Liste von über 60 CSS-Eigenschaften!).
    • Interaktionsdaten: isInteractive-Status, erfasste eventListeners (inline und heuristisch für gängige Events wie click, change, submit, focus, blur etc.), und dataAttributes.
    • Inhaltliche Tiefe: textContent, src (für Bilder), href (für Links), inputValue (für Formularfelder), alt (für Bilder), formAction, formMethod (für Formulare) und weitere spezifische Attribute für Tags wie <link>, <meta>, <iframe>, <svg>, <canvas>.
    • Struktur & Beziehungen: Einen vereinfachten structureTree der direkten Kindelemente (bis zu 2 Ebenen tief, inkl. ihrer IDs, Klassen, Text-Snippets und wichtigen Attributen wie src/href), sowie das komprimierte rawChildrenHTML der direkten Kinder für den genauen Markup-Kontext.
    • Semantische Marker: ariaRole, ariaLabel und ariaHidden zur besseren Interpretation der Barrierefreiheit und Rolle des Elements.

  • ➕ Leistungsstarke Multi-Auswahl: Halte die STRG-Taste gedrückt, während du klickst, um mehrere Elemente zu deiner Auswahl hinzuzufügen. Ideal für den Vergleich von Komponenten, das Sammeln von Trainingsdaten für LLMs oder die Analyse von Listenstrukturen.

  • ✂️ Direkt in die Zwischenablage: Kein manuelles Kopieren und Einfügen. Ein Klick genügt, und die vollständige, strukturierte JSONL-Analyse liegt bereit, um sie in deinem Editor, einem Dokument oder einem KI-Chat einzufügen.

  • 🕹️ Ergonomisches Interface & Feedback:

    • Der Button ist per Drag & Drop frei beweglich und merkt sich seine Position.
    • Drücke die ESC-Taste, um den Auswahlmodus jederzeit sofort zu beenden.
    • Klare Status- und Benachrichtigungsmeldungen informieren dich über den aktuellen Modus und den Erfolg der Aktionen.

💡 So benutzt du das Tool

  1. Aktivieren: Klicke auf den runden Pipetten-Button an der Seite, um den Auswahlmodus zu starten.
  2. Auswählen:
    • Einzel-Auswahl: Klicke auf ein beliebiges Element. Die detaillierte Blaupause wird sofort in deine Zwischenablage kopiert.
    • Mehrfach-Auswahl: Halte die STRG-Taste gedrückt und klicke nacheinander auf mehrere Elemente. Ein abschließender Klick (ohne STRG) auf das letzte Element kopiert die Blaupausen aller ausgewählten Elemente.
  3. Beenden: Drücke die ESC-Taste, um den Auswahlmodus jederzeit abzubrechen.
  4. Analysieren: Füge den Inhalt aus deiner Zwischenablage in dein bevorzugtes Werkzeug ein. Beachte die Rollen-Anweisungen im Prompt-Header, um die LLM optimal zu nutzen!

Dieses Tool ist ein unverzichtbarer Begleiter für jeden, der das Web nicht nur ansehen, sondern wirklich verstehen, transformieren oder für datenintensive KI-Anwendungen nutzen will.

Viel Spaß beim Analysieren! 🎉

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址