Best practice per cloni perfetti

Perché alcune pagine web sono difficili da clonare?

Le applicazioni web moderne (SPA) dipendono fortemente da JavaScript per renderizzare i contenuti. Ciò significa che quando la pagina viene caricata inizialmente, l'HTML è spesso vuoto e il contenuto viene recuperato dinamicamente. Inoltre, molte pagine web utilizzano meccanismi anti-scraping, sistemi complessi di variabili CSS e Shadow DOM.

Per ottenere risultati di clonazione precisi al 100 % a livello di pixel, segui queste best practice.

Preparazione prima della clonazione

1. Assicurati che il contenuto sia completamente caricato

Il Caricamento pigro (Lazy Loading) è il principale colpevole dei cloni incompleti. Molte immagini, liste lunghe e contenuti inferiori vengono caricati solo quando scorri verso la loro posizione.

Approccio corretto:

• Scorri lentamente dall'alto verso il basso la pagina per assicurarti che tutti i segnaposto delle immagini vengano sostituiti con immagini reali.
• Fai clic sui pulsanti "Carica altro" ed espandi tutti i contenuti che vuoi acquisire.
• Attendi che tutti i file dei font abbiano terminato il caricamento (per evitare che il testo venga visualizzato con i font predefiniti).

2. Attiva stati specifici dell'interfaccia

Se desideri acquisire uno specifico stato interattivo:

• Espandi i menu a discesa
• Apri Modali / Finestre di dialogo
• Passa a schede specifiche
• Attiva stati Hover (puoi forzare lo stato :hover di un elemento tramite Chrome DevTools)

Mentre questi stati sono attivi, fai clic sul pulsante "Avvia clonazione" dell'estensione.

3. Gestione dei contenuti multimediali

• Video: Per impostazione predefinita, l'estensione cerca di mantenere il tag <video> e il suo attributo src, ma non scaricherà file video di grandi dimensioni. Assicurati che il video abbia un attributo poster (immagine di copertina) in modo che mostri un segnaposto quando è offline.
• Canvas / WebGL: Gli elementi renderizzati dinamicamente in questo modo non possono essere acquisiti dalla serializzazione DOM tradizionale. L'estensione proverà automaticamente a convertire il Canvas in immagini Base64 statiche, ma scene WebGL complesse potrebbero non essere ripristinate perfettamente.
• Iframe: Gli iframe tra origini (ad esempio, video YouTube incorporati, sistemi di commenti di terze parti) non possono essere clonati in profondità per motivi di sicurezza. Manterranno i loro link src originali.

Suggerimenti per la configurazione avanzata

Nel pannello delle impostazioni dell'estensione ci sono diverse opzioni chiave che influenzano la qualità della clonazione:

Rimuovere gli script vs. Mantenere gli script

• Seleziona "Rimuovi tutto il JS" (consigliato solo per la visualizzazione): Questo genera una pagina completamente statica. Il vantaggio è una dimensione ridotta del file, sicurezza assoluta e nessuna pubblicità pop-up o codice di tracciamento verrà eseguito. Lo svantaggio è che le funzionalità interattive come caroselli e fisarmoniche non funzioneranno.
• Seleziona "Mantieni interazioni di base" (funzionalità beta): L'estensione proverà a filtrare gli script di analisi (come GA) mantenendo gli script che controllano l'interfaccia. Nota: Le pagine SPA complesse potrebbero mostrare una schermata vuota se il JS viene mantenuto e aperte localmente perché non riescono a trovare le API di backend.

Conversione dei percorsi delle risorse

Assicurati che l'opzione "Converti percorsi assoluti in percorsi relativi" sia attivata. Questo permette al pacchetto ZIP generato di essere aperto direttamente sul tuo disco rigido locale (tramite il protocollo file://) senza perdere stili a causa di problemi di percorso.

Gestione dei casi estremi

Pagine che contengono Shadow DOM

Alcune librerie di componenti moderne usano Shadow DOM, rendendo la loro struttura interna invisibile per impostazione predefinita. Soluzione: Il motore principale di CloneWebsite include un shadow-dom-flattener sperimentale che tenta di attraversare tutte le radici shadow ed estrarre il loro contenuto e stili nel DOM principale. Se rilevi componenti mancanti, attiva "Forza appiattimento di Shadow DOM" nelle impostazioni.

Bloccato da CSP (Content Security Policy)

Su alcuni siti web estremamente rigorosi (come banche, grandi intranet aziendali), potresti vedere il seguente errore nella Console: Refused to execute inline script because it violates the following Content Security Policy directive...

Soluzione: Attualmente, questo è un limite di sicurezza rigido del browser. Puoi provare a cercare plug-in ausiliari "Disable CSP" nel Chrome Store per disattivare temporaneamente il CSP del sito web di destinazione durante la clonazione.

Elenco di controllo finale

1. Hai scorsoo fino in fondo alla pagina? ✅
2. Modali e menu espansi? ✅
3. Le impostazioni dell'estensione corrispondono alle tue esigenze? ✅
4. Fai clic su clona e attendi il completamento! 🚀