Guia da extensão do Chrome

Visão geral da extensão

A extensão do Chrome do CloneWebsite é a principal ferramenta para capturar estados de páginas web. Diferente dos rastreadores web tradicionais, ela é executada dentro do contexto do seu navegador, o que significa que pode:

1. Contornar restrições CORS: Acessar e baixar diretamente recursos entre origens (como imagens e fontes hospedados por terceiros).
2. Capturar o estado renderizado real: Obter o DOM e CSS finais após os cálculos dinâmicos do JavaScript.
3. Acessar conteúdo autenticado: Clonar páginas que exigem login (como painéis, sistemas administrativos).

Interface e recursos

Clique no ícone da extensão no canto superior direito do navegador para abrir o painel de controle principal.

A barra de ferramentas flutuante tem dois destinos de saída: Site mantém o fluxo de trabalho HTML/ZIP existente, enquanto Figma cria um arquivo .cdesign local para o plugin Figma do CloneWebsite. Consulte Exportar páginas web para o Figma para o fluxo de trabalho completo e o modelo de permissões.

Configurações de clonagem

Antes de iniciar uma clonagem, você pode configurar as seguintes opções:

• Modo de Clonagem Profunda: Tenta capturar conteúdo de iframe e recursos dinâmicos mais profundos (pode aumentar o tempo de processamento).
• Processamento de imagens:
  • Extrair como arquivos (Recomendado): Extrai todas as imagens como arquivos .png/.jpg independentes salvos na pasta assets.
  • Manter Base64: Mantém as imagens como dados embutidos no HTML (resultará em um tamanho de arquivo HTML enorme).
• Filtragem de privacidade:
  • Remover scripts de rastreamento: Remove automaticamente códigos de rastreamento conhecidos como Google Analytics, Facebook Pixel, etc.
  • Remover todo o JS: Gera uma cópia completamente estática e não interativa da página (a mais segura).
• Corrigir links externos automaticamente: Converte caminhos absolutos em caminhos relativos para garantir uma experiência de navegação offline suave.

Processo de clonagem detalhado

1. Fase de preparação

1. Role pela página para garantir que todas as imagens e conteúdos de carregamento preguiçoso estejam totalmente carregados.
2. Expanda quaisquer menus suspensos, componentes de acordeão ou modais que você deseja capturar.
3. Aguarde até que todas as telas de esqueleto sejam substituídas por conteúdo real.

2. Fase de execução

Após clicar em Iniciar clonagem, a extensão executa as seguintes etapas:

1. Congelar DOM: Pausa todas as animações CSS e mutações DOM acionadas por temporizadores para evitar que a página mude durante a captura.
2. Extrair recursos: Percorre a árvore DOM para encontrar todas as imagens, fontes e folhas de estilo externas referenciadas.
3. Calcular estilos: Obtém os estilos computados finais para todos os elementos para garantir consistência visual entre ambientes.
4. Limpar redundâncias: Remove elementos invisíveis, marcadores de posição vazios e tags de script inúteis conhecidas.
5. Empacotar e baixar: Usa JSZip para construir a estrutura de arquivos na memória e dispara a ação de download do navegador.

3. Lidando com páginas grandes

Se você tiver problemas ao clonar páginas muito grandes ou complexas (como listas longas ou painéis de rolagem infinita):

• Tente clonar em partes: expanda apenas as partes que mais lhe interessam.
• Feche outras abas não relacionadas para liberar memória do navegador.
• Se o navegador exibir "Página não responsiva", selecione "Aguardar"; o processo complexo de serialização pode levar algum tempo.

Atalhos e ações comuns

• Alt + Shift + C (Mac: Option + Shift + C): Clona a página atual com um clique usando as configurações padrão.
• Menu de contexto: Clique com o botão direito em uma área vazia da página e selecione CloneWebsite -> Clone this page.

Erros comuns e soluções

P: Por que o layout da página baixada está bagunçado?
R: Isso geralmente ocorre porque a página usa variáveis CSS complexas ou depende de lógica JavaScript específica para calcular dimensões dinamicamente. Tente ativar a opção "Forçar estilos críticos embutidos" nas configurações.

P: Por que os ícones não aparecem?
R: Alguns ícones de fonte (como FontAwesome) podem ter proteção contra hotlink. A extensão tenta buscá-los, mas se o servidor recusar, os ícones aparecerão como quadrados. Estamos continuamente otimizando a estratégia entre origens para fontes.

P: Nada acontece quando clico em clonar?
R: Abra as Ferramentas de desenvolvedor do Chrome (F12) e mude para o painel Console para verificar erros. Algumas políticas de segurança de conteúdo (CSP) extremamente rigorosas podem bloquear a execução dos scripts da extensão.