Melhores práticas para clones perfeitos

Por que algumas páginas web são difíceis de clonar?

Aplicativos web modernos (SPAs) dependem fortemente de JavaScript para renderizar conteúdo. Isso significa que, quando a página é carregada inicialmente, o HTML costuma estar vazio e o conteúdo é obtido dinamicamente. Além disso, muitas páginas web usam mecanismos anti-raspagem, sistemas complexos de variáveis CSS e Shadow DOM.

Para obter resultados de clonagem 100 % precisos em pixel, siga estas melhores práticas.

Preparação antes da clonagem

1. Garanta que o conteúdo esteja totalmente carregado

O Carregamento preguiçoso (Lazy Loading) é o principal culpado por clones incompletos. Muitas imagens, listas longas e conteúdo inferior só são carregados quando você rola até sua posição.

Abordagem correta:

• Role lentamente do topo até o fim da página para garantir que todos os marcadores de imagem sejam substituídos por imagens reais.
• Clique nos botões "Carregar mais" e expanda todo o conteúdo que deseja capturar.
• Aguarde até que todos os arquivos de fonte terminem de carregar (para evitar que o texto seja exibido em fontes padrão).

2. Acione estados específicos da interface

Se você quiser capturar um estado interativo específico:

• Expanda menus suspensos
• Abra Modais / Diálogos
• Alterne para abas específicas
• Acione estados de Hover (você pode forçar o estado :hover de um elemento via Chrome DevTools)

Enquanto esses estados estiverem ativos, clique no botão "Iniciar clonagem" da extensão.

3. Tratamento de conteúdo multimídia

• Vídeo: Por padrão, a extensão tenta manter a tag <video> e seu atributo src, mas não fará o download de arquivos de vídeo enormes. Certifique-se de que o vídeo tenha um atributo poster (imagem de capa) para que ele exiba um marcador de posição quando offline.
• Canvas / WebGL: Elementos renderizados dinamicamente dessa forma não podem ser capturados pela serialização DOM tradicional. A extensão tentará converter automaticamente o Canvas em imagens Base64 estáticas, mas cenas WebGL complexas podem não ser restauradas perfeitamente.
• Iframe: Iframes entre origens (por exemplo, vídeos do YouTube incorporados, sistemas de comentários de terceiros) não podem ser clonados profundamente por motivos de segurança. Eles manterão seus links src originais.

Dicas de configuração avançada

No painel de configurações da extensão, há várias opções principais que afetam a qualidade da clonagem:

Remover scripts vs. Manter scripts

• Selecione "Remover todo o JS" (recomendado apenas para exibição): Isso gera uma página completamente estática. A vantagem é um tamanho de arquivo pequeno, segurança absoluta e nenhum anúncio pop-up ou código de rastreamento será executado. A desvantagem é que recursos interativos como carrosséis e acordeões não funcionarão.
• Selecione "Manter interações principais" (recurso beta): A extensão tentará filtrar scripts analíticos (como GA) mantendo os scripts que controlam a interface. Nota: Páginas SPA complexas podem mostrar uma tela em branco se o JS for mantido e abertas localmente porque não conseguem encontrar as APIs de backend.

Conversão de caminho de recursos

Certifique-se de que a opção "Converter caminhos absolutos em caminhos relativos" esteja ativada. Isso permite que o pacote ZIP gerado seja aberto diretamente no seu disco rígido local (através do protocolo file://) sem perder estilos devido a problemas de caminho.

Tratamento de casos extremos

Páginas que contêm Shadow DOM

Algumas bibliotecas de componentes modernas usam Shadow DOM, tornando sua estrutura interna invisível por padrão. Solução: O mecanismo central do CloneWebsite inclui um shadow-dom-flattener experimental que tenta percorrer todas as shadow roots e extrair seu conteúdo e estilos para a árvore DOM principal. Se encontrar componentes ausentes, ative "Forçar achatamento do Shadow DOM" nas configurações.

Bloqueado por CSP (Content Security Policy)

Em alguns sites extremamente rigorosos (como bancos, grandes intranets corporativas), você pode ver o seguinte erro no Console: Refused to execute inline script because it violates the following Content Security Policy directive...

Solução: Atualmente, este é um limite de segurança rígido do navegador. Você pode tentar pesquisar por complementos auxiliares "Disable CSP" na Chrome Store para desativar temporariamente o CSP do site de destino durante a clonagem.

Lista de verificação final

1. Rolou até o final da página? ✅
2. Modais e menus expandidos? ✅
3. As configurações da extensão atendem às suas necessidades? ✅
4. Clique em clonar e aguarde a conclusão! 🚀