Leitfaden zur Chrome-Erweiterung

Übersicht über die Erweiterung

Die CloneWebsite Chrome-Erweiterung ist das wichtigste Werkzeug zum Erfassen von Webseiten-Zuständen. Anders als traditionelle Web-Crawler läuft sie im Kontext Ihres Browsers, was bedeutet, dass sie:

1. CORS-Beschränkungen umgehen kann: Direkt auf Cross-Origin-Ressourcen zugreifen und diese herunterladen (wie von Dritten gehostete Bilder und Schriftarten).
2. Den echten gerenderten Zustand erfassen kann: Das endgültige DOM und CSS nach dynamischen JavaScript-Berechnungen abrufen.
3. Auf authentifizierten Inhalt zugreifen kann: Seiten klonen, die eine Anmeldung erfordern (wie Dashboards, Administrationssysteme).

Oberfläche und Funktionen

Klicken Sie oben rechts im Browser auf das Erweiterungssymbol, um das Haupt-Control-Panel zu öffnen.

Die schwebende Symbolleiste hat zwei Ausgabeziele: Website behält den bestehenden HTML/ZIP-Workflow bei, während Figma ein lokales .cdesign-Archiv für das CloneWebsite Figma-Plugin erstellt. Siehe Webseiten nach Figma exportieren für den vollständigen Workflow und das Berechtigungsmodell.

Klon-Einstellungen

Bevor Sie mit einem Klon beginnen, können Sie die folgenden Optionen konfigurieren:

• Deep Clone Modus: Versucht, Iframe-Inhalte und tiefere dynamische Ressourcen zu erfassen (kann die Verarbeitungszeit erhöhen).
• Bildverarbeitung:
  • Als Dateien extrahieren (Empfohlen): Extrahiert alle Bilder als eigenständige .png/.jpg-Dateien, die im Ordner „assets" gespeichert werden.
  • Base64 beibehalten: Behält Bilder als Inline-Daten im HTML bei (führt zu einer riesigen HTML-Dateigröße).
• Datenschutz-Filterung:
  • Tracking-Skripte entfernen: Entfernt automatisch bekannte Tracking-Codes wie Google Analytics, Facebook Pixel usw.
  • Alle JS entfernen: Erzeugt eine vollständig statische, nicht interaktive Kopie der Seite (am sichersten).
• Externe Links automatisch reparieren: Wandelt absolute Pfade in relative Pfade um, um ein reibungsloses Offline-Browsing-Erlebnis zu gewährleisten.

Detaillierter Klon-Prozess

1. Vorbereitungsphase

1. Scrollen Sie durch die Seite, um sicherzustellen, dass alle lazy-load-Bilder und -Inhalte vollständig geladen sind.
2. Klappen Sie alle Dropdown-Menüs, Akkordeon-Komponenten oder Modals auf, die Sie erfassen möchten.
3. Warten Sie, bis alle Skeleton-Bildschirme durch echte Inhalte ersetzt wurden.

2. Ausführungsphase

Nach dem Klicken auf Klonen starten führt die Erweiterung die folgenden Schritte aus:

1. DOM einfrieren: Pausiert alle CSS-Animationen und durch Timer ausgelösten DOM-Mutationen, um zu verhindern, dass sich die Seite während der Erfassung ändert.
2. Ressourcen extrahieren: Durchläuft den DOM-Baum, um alle referenzierten Bilder, Schriftarten und externen Stylesheets zu finden.
3. Stile berechnen: Ruft die endgültigen berechneten Stile für alle Elemente ab, um die visuelle Konsistenz zwischen Umgebungen zu gewährleisten.
4. Redundanz bereinigen: Entfernt unsichtbare Elemente, leere Platzhalter und bekannte nutzlose Script-Tags.
5. Verpacken und herunterladen: Verwendet JSZip, um die Dateistruktur im Speicher aufzubauen, und löst die Download-Aktion des Browsers aus.

3. Umgang mit großen Seiten

Wenn beim Klonen sehr großer oder komplexer Seiten Probleme auftreten (wie lange Listen oder unendlich scrollende Dashboards):

• Versuchen Sie, stückweise zu klonen: Klappen Sie nur die Teile auf, die Sie am meisten interessieren.
• Schließen Sie andere irrelevante Tabs, um den Browser-Speicher freizugeben.
• Wenn der Browser „Seite reagiert nicht" meldet, wählen Sie „Warten"; der komplexe Serialisierungsprozess kann einige Zeit dauern.

Tastenkürzel und häufige Aktionen

• Alt + Shift + C (Mac: Option + Shift + C): Klonen Sie die aktuelle Seite mit einem Klick unter Verwendung der Standardeinstellungen.
• Kontextmenü: Klicken Sie mit der rechten Maustaste auf einen leeren Bereich der Seite und wählen Sie CloneWebsite -> Clone this page.

Häufige Fehler und Lösungen

F: Warum ist das Layout der heruntergeladenen Seite durcheinander?
A: Das liegt normalerweise daran, dass die Seite komplexe CSS-Variablen verwendet oder auf eine bestimmte JavaScript-Logik angewiesen ist, um Abmessungen dynamisch zu berechnen. Versuchen Sie, die Option „Kritische Stile erzwingt einbinden" in den Einstellungen zu aktivieren.

F: Warum werden Symbole nicht angezeigt?
A: Einige Schrift-Symbole (wie FontAwesome) haben möglicherweise einen Hotlink-Schutz. Die Erweiterung versucht, sie abzurufen, aber wenn der Server dies verweigert, werden die Symbole als Quadrate angezeigt. Wir optimieren kontinuierlich die Cross-Origin-Strategie für Schriftarten.

F: Nichts passiert, wenn ich auf Klonen klicke?
A: Bitte öffnen Sie die Chrome-Entwicklertools (F12) und wechseln Sie zum Konsolen-Panel, um nach Fehlern zu suchen. Einige extrem strenge Content Security Policies (CSP) können die Ausführung von Erweiterungsskripten blockieren.