Cómo funciona Screenshot PDF: de una página web larga a una captura continua
Una captura de pantalla de página completa no es una fotografía de un documento completo tomada en un instante. Un navegador normalmente expone solo los píxeles dentro de la ventana gráfica actual. Por lo tanto, capturar una página larga requiere una secuencia controlada: identificar qué se desplaza, medirlo, moverse a través de ella, capturar sectores visibles y ensamblar esos sectores sin cambiar silenciosamente la página de origen.
Este artículo documenta la actual extensión de captura de pantalla PDF en la versión 0.0.13. Se basa en el código de captura y edición enviado, no en un diagrama idealizado. Los límites a continuación son importantes porque una limitación reproducible es más útil que una promesa de que cada página se puede capturar perfectamente.
1. La extensión comienza con la pestaña activa.
La captura de pantalla PDF utiliza una extensión de Chrome Manifest V3 y la pestaña del navegador activa. Las páginas internas de Chrome, como chrome://settings y Chrome Web Store, están restringidas por el navegador y se rechazan antes de que comience la captura. Se pueden capturar páginas públicas ordinarias, páginas autenticadas visibles para el usuario y muchas pantallas de aplicaciones porque la extensión funciona dentro de la sesión actual del usuario.
Ese acceso no significa que todas las superficies integradas estén disponibles. Los marcos de origen cruzado, videos protegidos, WebGL, listas virtualizadas y contenido dibujado fuera del flujo normal de la página aún pueden requerir un método de exportación diferente. Chrome documenta la operación subyacente de la pestaña visible en su API tabs.captureVisibleTab.
2. Encontrar el contenedor de desplazamiento real
No todos los sitios se desplazan por el cuerpo del documento. Los paneles frecuentemente colocan el área desplazable dentro de un div, mientras que la página exterior permanece fija. La extensión primero verifica los elementos habituales de desplazamiento de documentos. Si ninguno califica, examina los contenedores de contenido comunes y selecciona un elemento visible con desbordamiento vertical y el área útil más grande.
Esta elección tiene consecuencias. Medir el elemento incorrecto produce una imagen que se detiene después de una pantalla aunque el usuario pueda ver más contenido. Un diagnóstico práctico es comparar la barra de desplazamiento que mueve el usuario con el elemento cuyo scrollHeight cambia en DevTools. La extensión realiza esta elección automáticamente, pero es posible que las aplicaciones anidadas o de desplazamiento horizontal aún necesiten una captura seccional.
3. Medir antes de mudarse
La carga útil de captura registra el ancho de la página, el alto de la página, el ancho de la ventana gráfica, la altura de la ventana gráfica y la proporción de píxeles del dispositivo. Los píxeles CSS describen el diseño de la página; Los píxeles PNG capturados pueden ser más densos en una pantalla de alto DPI. Posteriormente, el editor deriva la proporción de píxeles intrínseca del primer segmento capturado para que las coordenadas CSS y las coordenadas de la imagen permanezcan alineadas.
El flujo de trabajo actual de página completa coloca un límite superior explícito en 15 000 píxeles CSS de altura por ejecución. El límite evita que una fuente ilimitada consuma memoria de forma indefinida. Si una página es más larga, capture secciones con nombres con superposición visible o utilice una exportación oficial del servicio de origen. No describa un resultado más allá de ese límite como completo.
4. Capturar una ventana gráfica a la vez
La extensión se mueve por la página en pasos a la altura de la ventana gráfica. Después de cada desplazamiento solicitado, lee la posición de desplazamiento real en lugar de asumir que la página se movió exactamente como se solicitó. Esto protege el segmento final, donde el navegador puede fijar la posición de desplazamiento en la parte inferior.
El guión de contenido espera dos cuadros de animación y luego aproximadamente 300 milisegundos después de moverse. El flujo de trabajo en segundo plano agrega otra breve pausa entre cortes. Estas esperas dan tiempo a los diseños normales para que se asienten, pero no garantizan que se hayan completado todas las imágenes, animaciones o solicitudes de red diferidas. Para páginas con muchos medios, desplácese por la página una vez manualmente y espere a que se resuelvan los marcadores de posición antes de comenzar la captura.
Chrome puede limitar temporalmente la captura de pestañas visibles. Cuando el error coincide con el límite de velocidad de captura de Chrome, Screenshot PDF lo vuelve a intentar hasta tres veces con un retraso de un segundo. Otros errores se informan en lugar de ocultarse. Esta distinción evita convertir un permiso persistente o un problema de representación en un bucle silencioso largo.
5. Manejo de elementos de interfaz flotantes
Los encabezados fijos, los controles de cookies, los iniciadores de chat y las barras de herramientas flotantes se adjuntan a la ventana gráfica en lugar de a un único lugar del documento. Si permanecen visibles durante cada corte, aparecen repetidamente en la imagen unida. El PDF de captura de pantalla registra los candidatos flotantes, los mantiene en el primer segmento y los oculta de segmentos posteriores cambiando la visibilidad en lugar de reescribir la posición del diseño.
La visibilidad se restablece después del éxito y también dentro del camino del fracaso. La página vuelve a la parte superior, se elimina la interfaz de progreso de captura y se borra la insignia de extensión. Esta limpieza es parte de la corrección: una herramienta no debe dejar la página de origen visualmente alterada cuando falla una captura.
6. Pasar sectores al editor
Cada rebanada lleva su posición vertical real. El editor carga todos los sectores PNG, crea un lienzo blanco y los dibuja en posiciones derivadas de las coordenadas CSS, la proporción de píxeles intrínseca del dispositivo y cualquier factor de escala basado en la memoria. La altura útil termina en la última ventana gráfica capturada en lugar de confiar automáticamente en una medida de página anterior que puede haber cambiado.
Este método de unión funciona bien para diseños estables de desplazamiento vertical. No puede reconstruir contenido que nunca existió en un solo estado de desplazamiento. Las tablas virtualizadas pueden descargar filas anteriores a medida que aparecen nuevas filas; los paneles en vivo pueden cambiar los valores entre sectores; Los componentes giratorios automáticos pueden mostrar marcos diferentes. En esos casos, utilice secciones más pequeñas o una exportación de origen nativo.
7. Un registro de captura reproducible
Para un documento personal normal, una revisión visual puede ser suficiente. Para evidencia de respaldo, investigación, revisión de diseño o trabajo de registros, registre:
- URL pública o una descripción no confidencial de la página autenticada;
- Chrome y versiones de extensión;
- tamaño de la ventana gráfica, zoom y proporción de píxeles del dispositivo;
- punto inicial y final previsto;
- si el contenido se expandió o se desplazó previamente;
- si la página superó los 15.000 píxeles CSS;
- cualquier marco faltante, superficie incrustada o valor vivo.
Screenshot PDF incluye una página de prueba de captura reproducible pública con un encabezado sticky, un control fijo, contenido de carga diferida, una tabla, fondos alternos y un marcador final. Úsela para distinguir un problema general de captura de otro específico del diseño de un sitio.
Lo que el oleoducto no prueba
Una captura de pantalla visualmente completa no demuestra autenticidad, admisibilidad legal ni una fuente no modificada. Registra los píxeles renderizados de una sesión del navegador. Mantenga la URL de origen, la hora de acceso y el contexto relevante por separado. Cuando el servicio de origen ofrece una declaración firmada, una exportación estructurada, una factura o un PDF digital, conserve esa fuente más sólida junto con la captura de pantalla.
La canalización actual está deliberadamente limitada: mide, captura en posiciones reales, reintenta solo las limitaciones conocidas, restaura la página, ensambla localmente y pide al usuario que inspeccione la salida. Esos límites son los que hacen que una captura de una página larga sea comprensible y repetible.