Guida all'estensione di Chrome

Panoramica dell'estensione

L'estensione Chrome di CloneWebsite è lo strumento principale per acquisire gli stati delle pagine web. A differenza dei crawler web tradizionali, viene eseguita all'interno del contesto del tuo browser, il che significa che può:

1. Aggirare le restrizioni CORS: Accedere e scaricare direttamente risorse tra origini (come immagini e font ospitati da terze parti).
2. Acquisire il vero stato renderizzato: Ottenere il DOM e i CSS finali dopo i calcoli dinamici di JavaScript.
3. Accedere a contenuti autenticati: Clonare pagine che richiedono il login (come dashboard, sistemi di amministrazione).

Interfaccia e funzionalità

Fai clic sull'icona dell'estensione in alto a destra nel browser per aprire il pannello di controllo principale.

La barra degli strumenti mobile ha due destinazioni di output: Sito web mantiene il flusso di lavoro HTML/ZIP esistente, mentre Figma crea un archivio .cdesign locale per il plugin Figma di CloneWebsite. Consulta Esportare pagine web in Figma per il flusso di lavoro completo e il modello di autorizzazioni.

Impostazioni di clonazione

Prima di avviare una clonazione, puoi configurare le seguenti opzioni:

• Modalità Clonazione Profonda: Tenta di acquisire il contenuto degli iframe e risorse dinamiche più profonde (può aumentare i tempi di elaborazione).
• Elaborazione delle immagini:
  • Estrai come file (Consigliato): Estrae tutte le immagini come file .png/.jpg indipendenti salvati nella cartella assets.
  • Mantieni Base64: Mantiene le immagini come dati inline all'interno dell'HTML (comporterà dimensioni del file HTML enormi).
• Filtraggio della privacy:
  • Rimuovi script di tracciamento: Rimuove automaticamente codici di tracciamento noti come Google Analytics, Facebook Pixel, ecc.
  • Rimuovi tutto JS: Genera una copia completamente statica e non interattiva della pagina (la più sicura).
• Riparazione automatica dei link esterni: Converte percorsi assoluti in percorsi relativi per garantire un'esperienza di navigazione offline fluida.

Processo di clonazione dettagliato

1. Fase di preparazione

1. Scorri la pagina per assicurarti che tutte le immagini e i contenuti a caricamento pigro siano completamente caricati.
2. Espandi eventuali menu a discesa, componenti a fisarmonica o modali che desideri acquisire.
3. Attendi che tutte le schermate scheletro vengano sostituite con contenuti reali.

2. Fase di esecuzione

Dopo aver fatto clic su Avvia clonazione, l'estensione esegue i seguenti passaggi:

1. Congelare il DOM: Sospende tutte le animazioni CSS e le mutazioni DOM attivate da timer per evitare che la pagina cambi durante l'acquisizione.
2. Estrarre le risorse: Attraversa l'albero DOM per trovare tutte le immagini, i font e i fogli di stile esterni referenziati.
3. Calcolare gli stili: Ottiene gli stili calcolati finali per tutti gli elementi per garantire la coerenza visiva tra ambienti.
4. Pulire le ridondanze: Rimuove elementi invisibili, segnaposto vuoti e tag di script inutili noti.
5. Assemblare e scaricare: Usa JSZip per costruire la struttura dei file in memoria e attiva l'azione di download del browser.

3. Gestione di pagine grandi

Se riscontri problemi nella clonazione di pagine molto grandi o complesse (come liste lunghe o dashboard a scorrimento infinito):

• Prova a clonare a blocchi: espandi solo le parti che ti interessano maggiormente.
• Chiudi altre schede non correlate per liberare la memoria del browser.
• Se il browser mostra "Pagina non risponde", seleziona "Attendi"; il complesso processo di serializzazione potrebbe richiedere del tempo.

Scorciatoie e azioni comuni

• Alt + Shift + C (Mac: Opzione + Shift + C): Clona con un clic la pagina corrente usando le impostazioni predefinite.
• Menu contestuale: Fai clic con il pulsante destro del mouse su un'area vuota della pagina e seleziona CloneWebsite -> Clone this page.

Errori comuni e soluzioni

D: Perché il layout della pagina scaricata è scombussolato?
R: Di solito accade perché la pagina utilizza variabili CSS complesse o si affida a una logica JavaScript specifica per calcolare dinamicamente le dimensioni. Prova ad attivare l'opzione "Forza stili critici inline" nelle impostazioni.

D: Perché le icone non vengono visualizzate?
R: Alcune icone di font (come FontAwesome) potrebbero avere protezione hotlink. L'estensione cerca di recuperarli, ma se il server rifiuta, le icone verranno visualizzate come quadrati. Stiamo ottimizzando continuamente la strategia tra origini per i font.

D: Non succede nulla quando faccio clic su clona?
R: Apri gli Strumenti per sviluppatori di Chrome (F12) e passa al pannello Console per verificare la presenza di errori. Alcune policy di sicurezza dei contenuti (CSP) estremamente rigorose potrebbero bloccare l'esecuzione degli script dell'estensione.