Guía de la extensión de Chrome

Descripción general de la extensión

La extensión de Chrome de CloneWebsite es la herramienta principal para capturar estados de páginas web. A diferencia de los rastreadores web tradicionales, se ejecuta dentro del contexto de tu navegador, lo que significa que puede:

1. Evitar las restricciones CORS: Acceder y descargar directamente recursos entre orígenes (como imágenes y fuentes alojadas por terceros).
2. Capturar el estado real renderizado: Obtener el DOM y CSS finales después de los cálculos dinámicos de JavaScript.
3. Acceder a contenido autenticado: Clonar páginas que requieren inicio de sesión (como paneles, sistemas de administración).

Interfaz y funciones

Haz clic en el icono de la extensión en la esquina superior derecha del navegador para abrir el panel de control principal.

La barra de herramientas flotante tiene dos destinos de salida: Sitio web mantiene el flujo de trabajo HTML/ZIP existente, mientras que Figma crea un archivo local .cdesign para el plugin de Figma de CloneWebsite. Consulta Exportar páginas web a Figma para el flujo de trabajo completo y el modelo de permisos.

Ajustes de clonación

Antes de iniciar una clonación, puedes configurar las siguientes opciones:

• Modo de clonación profunda: Intenta capturar el contenido de iframes y recursos dinámicos más profundos (puede aumentar el tiempo de procesamiento).
• Procesamiento de imágenes:
  • Extraer como archivos (Recomendado): Extrae todas las imágenes como archivos .png/.jpg independientes guardados en la carpeta assets.
  • Conservar Base64: Mantiene las imágenes como datos en línea dentro del HTML (resultará en un tamaño de archivo HTML enorme).
• Filtrado de privacidad:
  • Eliminar scripts de seguimiento: Elimina automáticamente códigos de seguimiento conocidos como Google Analytics, Facebook Pixel, etc.
  • Eliminar todo el JS: Genera una copia de la página completamente estática y sin interactividad (la más segura).
• Reparar enlaces externos automáticamente: Convierte rutas absolutas en relativas para garantizar una experiencia de navegación sin conexión fluida.

Proceso de clonación detallado

1. Fase de preparación

1. Desplázate por la página para asegurarte de que todas las imágenes y el contenido de carga diferida estén completamente cargados.
2. Expande los menús desplegables, componentes de acordeón o modales que desees capturar.
3. Espera a que todas las pantallas de esqueleto se reemplacen con contenido real.

2. Fase de ejecución

Tras hacer clic en Iniciar clonación, la extensión realiza los siguientes pasos:

1. Congelar DOM: Pausa todas las animaciones CSS y mutaciones DOM activadas por temporizadores para evitar que la página cambie durante la captura.
2. Extraer recursos: Recorre el árbol DOM para encontrar todas las imágenes, fuentes y hojas de estilo externas referenciadas.
3. Calcular estilos: Obtiene los estilos calculados finales para todos los elementos para garantizar la coherencia visual entre entornos.
4. Limpiar redundancia: Elimina elementos invisibles, marcadores de posición vacíos y etiquetas de script inútiles conocidas.
5. Empaquetar y descargar: Usa JSZip para construir la estructura de archivos en memoria y activa la acción de descarga del navegador.

3. Manejo de páginas grandes

Si encuentras problemas al clonar páginas muy grandes o complejas (como listas largas o paneles de desplazamiento infinito):

• Prueba a clonar por fragmentos: expande solo las partes que más te interesan.
• Cierra otras pestañas no relacionadas para liberar memoria del navegador.
• Si el navegador indica "Página no responde", selecciona "Esperar"; el proceso de serialización complejo puede tardar algún tiempo.

Atajos y acciones comunes

• Alt + Shift + C (Mac: Option + Shift + C): Clona la página actual con un clic usando la configuración predeterminada.
• Menú contextual: Haz clic derecho en un área vacía de la página y selecciona CloneWebsite -> Clone this page.

Errores comunes y soluciones

P: ¿Por qué el diseño de la página descargada está desordenado?
R: Suele deberse a que la página utiliza variables CSS complejas o depende de lógica de JavaScript específica para calcular dimensiones dinámicamente. Prueba a activar la opción "Forzar estilos críticos en línea" en los ajustes.

P: ¿Por qué no se muestran los iconos?
R: Algunos iconos de fuentes (como FontAwesome) pueden tener protección contra hotlinking. La extensión intenta obtenerlos, pero si el servidor se niega, los iconos se mostrarán como cuadrados. Estamos optimizando continuamente la estrategia entre orígenes para fuentes.

P: No ocurre nada al hacer clic en clonar.
R: Abre las Herramientas de desarrollo de Chrome (F12) y cambia al panel Consola para buscar errores. Algunas políticas de seguridad de contenido (CSP) extremadamente estrictas pueden bloquear la ejecución de los scripts de la extensión.