Best Practices für perfekte Klone

Warum lassen sich einige Webseiten schwer klonen?

Moderne Web-Anwendungen (SPAs) sind stark auf JavaScript angewiesen, um Inhalte zu rendern. Das bedeutet, wenn die Seite ursprünglich geladen wird, ist das HTML oft leer und der Inhalt wird dynamisch abgerufen. Darüber hinaus verwenden viele Webseiten Anti-Scraping-Mechanismen, komplexe CSS-Variablen-Systeme und Shadow DOM.

Befolgen Sie diese Best Practices, um zu 100 % pixelgenaue Klon-Ergebnisse zu erzielen.

Vorbereitung vor dem Klonen

1. Stellen Sie sicher, dass der Inhalt vollständig geladen ist

Lazy Loading ist die häufigste Ursache für unvollständige Klone. Viele Bilder, lange Listen und Inhalte am Seitenende werden erst geladen, wenn Sie zu ihrer Position scrollen.

Richtiges Vorgehen:

• Scrollen Sie langsam von oben nach unten durch die Seite, um sicherzustellen, dass alle Bildplatzhalter durch echte Bilder ersetzt werden.
• Klicken Sie auf die Schaltflächen „Mehr laden" und klappen Sie alle Inhalte auf, die Sie erfassen möchten.
• Warten Sie, bis alle Schriftdateien vollständig geladen sind (um zu vermeiden, dass Text in Standardschriften angezeigt wird).

2. Bestimmte UI-Zustände auslösen

Wenn Sie einen bestimmten Interaktionszustand erfassen möchten:

• Klappen Sie Dropdown-Menüs auf
• Öffnen Sie Modals / Dialoge
• Wechseln Sie zu bestimmten Tabs
• Lösen Sie Hover-Zustände aus (Sie können den :hover-Zustand eines Elements über die Chrome DevTools erzwingen)

Während diese Zustände aktiv sind, klicken Sie in der Erweiterung auf die Schaltfläche „Klonen starten".

3. Umgang mit Multimediainhalten

• Video: Standardmäßig versucht die Erweiterung, das <video>-Tag und sein src-Attribut beizubehalten, lädt aber keine riesigen Videodateien herunter. Stellen Sie sicher, dass das Video ein poster-Attribut (Cover-Bild) hat, damit es offline ein Platzhalterbild anzeigt.
• Canvas / WebGL: Dynamisch gerenderte Elemente wie diese können durch traditionelle DOM-Serialisierung nicht erfasst werden. Die Erweiterung versucht automatisch, Canvas in statische Base64-Bilder umzuwandeln, aber komplexe WebGL-Szenen lassen sich möglicherweise nicht perfekt wiederherstellen.
• Iframe: Cross-Origin-Iframes (z. B. eingebettete YouTube-Videos, Kommentar-Systeme von Drittanbietern) können aus Sicherheitsgründen nicht tief geklont werden. Sie behalten ihre ursprünglichen src-Links bei.

Tipps zur erweiterten Konfiguration

Im Einstellungspanel der Erweiterung gibt es mehrere Schlüsseloptionen, die die Klon-Qualität beeinflussen:

Skripte entfernen vs. Skripte beibehalten

• Wählen Sie „Alle JS entfernen" (empfohlen nur zur Anzeige): Dies erzeugt eine vollständig statische Seite. Der Vorteil ist eine kleine Dateigröße und absolute Sicherheit; es werden keine Pop-up-Anzeigen oder Tracking-Codes ausgeführt. Der Nachteil ist, dass interaktive Funktionen wie Karussells und Akkordeons nicht funktionieren.
• Wählen Sie „Kern-Interaktionen beibehalten" (Beta-Funktion): Die Erweiterung versucht, Analytics-Skripte (wie GA) herauszufiltern und gleichzeitig die Skripte beizubehalten, die die UI steuern. Hinweis: Komplexe SPA-Seiten könnten lokal geöffnet einen leeren Bildschirm zeigen, wenn JS beibehalten wird, da sie die Backend-APIs nicht finden.

Ressourcenpfad-Konvertierung

Stellen Sie sicher, dass die Option „Absolute Pfade in relative Pfade konvertieren" aktiviert ist. Dadurch kann das generierte ZIP-Paket direkt auf Ihrer lokalen Festplatte geöffnet werden (über das file://-Protokoll), ohne dass Stile aufgrund von Pfadproblemen verloren gehen.

Umgang mit Extremfällen

Seiten mit Shadow DOM

Einige moderne Komponenten-Bibliotheken verwenden Shadow DOM, wodurch ihre interne Struktur standardmäßig unsichtbar wird. Lösung: Die CloneWebsite-Kern-Engine enthält einen experimentellen shadow-dom-flattener, der versucht, alle Shadow-Roots zu durchlaufen und deren Inhalt und Stile in den Haupt-DOM-Baum zu extrahieren. Wenn Ihnen Komponenten fehlen, aktivieren Sie „Shadow DOM zwangsweise abflachen" in den Einstellungen.

Blockiert durch CSP (Content Security Policy)

Auf einigen extrem strengen Websites (z. B. Banken, große Unternehmens-Intranets) sehen Sie möglicherweise folgenden Fehler in der Konsole: Refused to execute inline script because it violates the following Content Security Policy directive...

Lösung: Derzeit handelt es sich um eine harte Sicherheitsbeschränkung des Browsers. Sie können versuchen, im Chrome Store nach Hilfs-Plugins wie „Disable CSP" zu suchen, um das CSP der Ziel-Website während des Klonens vorübergehend zu deaktivieren.

Abschließende Checkliste

1. Bis zum Seitenende gescrollt? ✅
2. Modals und Menüs ausgeklappt? ✅
3. Stimmen die Erweiterungseinstellungen mit Ihren Anforderungen überein? ✅
4. Auf Klonen klicken und auf den Abschluss warten! 🚀