Como o Screenshot PDF funciona: de uma página longa a uma captura contínua

Uma captura de tela de página inteira não é uma fotografia de um documento inteiro tirada em um instante. Um navegador normalmente expõe apenas os pixels dentro da janela de visualização atual. Capturar uma página longa requer, portanto, uma sequência controlada: identificar o que rola, medir, mover-se através dela, capturar fatias visíveis e montar essas fatias sem alterar silenciosamente a página de origem.

Este artigo documenta o pipeline de extensão de captura de tela PDF atual na versão 0.0.13. Ele é baseado na captura e no código do editor fornecidos, não em um diagrama idealizado. Os limites abaixo são importantes porque uma limitação reproduzível é mais útil do que uma promessa de que cada página pode ser capturada perfeitamente.

1. A extensão começa com a guia ativa

A captura de tela do PDF usa uma extensão Manifest V3 do Chrome e a guia ativa do navegador. As páginas internas do Chrome, como chrome://settings e a Chrome Web Store, são restritas pelo navegador e rejeitadas antes do início da captura. Páginas públicas comuns, páginas autenticadas visíveis para o usuário e muitas telas de aplicativos podem ser capturadas porque a extensão funciona dentro da sessão atual do usuário.

Esse acesso não significa que todas as superfícies incorporadas estejam disponíveis. Quadros de origem cruzada, vídeo protegido, WebGL, listas virtualizadas e conteúdo desenhado fora do fluxo normal da página ainda podem exigir um método de exportação diferente. O Chrome documenta a operação subjacente da guia visível em sua API tabs.captureVisibleTab.

2. Encontrando o contêiner de rolagem real

Nem todo site rola o corpo do documento. Os painéis frequentemente colocam a área rolável dentro de um div, enquanto a página externa permanece fixa. A extensão primeiro verifica os elementos usuais de rolagem do documento. Se nenhum for qualificado, ele examina os contêineres de conteúdo comuns e seleciona um elemento visível com estouro vertical e a maior área útil.

Esta escolha tem consequências. Medir o elemento errado produz uma imagem que para após uma tela, mesmo que o usuário possa ver mais conteúdo. Um diagnóstico prático é comparar a barra de rolagem que o usuário move com o elemento cujo scrollHeight muda no DevTools. A extensão faz essa escolha automaticamente, mas aplicativos aninhados ou de rolagem horizontal ainda podem precisar de uma captura seccional.

3. Medir antes de mover

A carga útil de captura registra a largura da página, a altura da página, a largura da janela de visualização, a altura da janela de visualização e a proporção de pixels do dispositivo. Pixels CSS descrevem o layout da página; pixels PNG capturados podem ser mais densos em uma tela de alto DPI. Posteriormente, o editor deriva a proporção intrínseca de pixels da primeira fatia capturada para que as coordenadas CSS e as coordenadas da imagem permaneçam alinhadas.

O fluxo de trabalho atual de página inteira estabelece um limite superior explícito de 15.000 pixels CSS de altura por execução. O limite impede que um feed ilimitado consuma memória indefinidamente. Se uma página for mais longa, capture seções nomeadas com sobreposição visível ou use uma exportação oficial do serviço de origem. Não descreva um resultado além desse limite como completo.

4. Capturando uma janela de visualização por vez

A extensão se move pela página em etapas de altura da janela de visualização. Após cada rolagem solicitada, ele lê a posição real da rolagem, em vez de assumir que a página foi movida exatamente conforme solicitado. Isso protege a fatia final, onde o navegador pode fixar a posição de rolagem na parte inferior.

O script de conteúdo aguarda dois quadros de animação e aproximadamente 300 milissegundos após a movimentação. O fluxo de trabalho em segundo plano adiciona outra pequena pausa entre as fatias. Essas esperas dão aos layouts comuns tempo para serem resolvidos, mas não são uma garantia de que todas as imagens, animações ou solicitações de rede preguiçosas foram concluídas. Para páginas com muita mídia, role a página uma vez manualmente e aguarde a resolução dos espaços reservados antes de iniciar a captura.

O Chrome pode limitar temporariamente a captura de guias visíveis. Quando o erro corresponde ao limite de taxa de captura do Chrome, o Screenshot PDF tenta até três vezes com um atraso de um segundo. Outros erros são relatados em vez de serem ocultados. Essa distinção evita transformar uma permissão persistente ou um problema de renderização em um longo loop silencioso.

5. Manipulação de elementos de interface flutuantes

Cabeçalhos fixos, controles de cookies, iniciadores de bate-papo e barras de ferramentas flutuantes são anexados à janela de visualização em vez de a um único local no documento. Se permanecerem visíveis durante cada corte, aparecerão repetidamente na imagem costurada. O PDF de captura de tela registra candidatos flutuantes, mantém-nos na primeira fatia e oculta-os das fatias posteriores, alterando a visibilidade em vez de reescrever a posição do layout.

A visibilidade é restaurada após o sucesso e também dentro do caminho da falha. A página retorna ao topo, a interface de progresso da captura é removida e o emblema da extensão é limpo. Essa limpeza faz parte da correção: uma ferramenta não deve deixar a página de origem visualmente alterada quando uma captura falha.

6. Passando fatias para o editor

Cada fatia carrega sua posição vertical real. O editor carrega todas as fatias PNG, cria um Canvas branco e as desenha em posições derivadas de coordenadas CSS, proporção intrínseca de pixels do dispositivo e qualquer fator de escala baseado em memória. A altura útil termina na última janela de visualização capturada, em vez de confiar automaticamente em uma medida de página anterior que pode ter sido alterada.

Este método de costura funciona bem para layouts estáveis ​​de rolagem vertical. Ele não pode reconstruir conteúdo que nunca existiu em um único estado de rolagem. As tabelas virtualizadas podem descarregar linhas anteriores à medida que novas linhas aparecem; painéis dinâmicos podem alterar valores entre fatias; componentes de rotação automática podem mostrar quadros diferentes. Nesses casos, use seções menores ou uma exportação nativa de origem.

7. Um registro de captura reproduzível

Para um documento pessoal comum, uma revisão visual pode ser suficiente. Para evidências de apoio, pesquisa, revisão de projeto ou trabalho de registros, registre:

• URL público ou uma descrição não confidencial da página autenticada;
• Versões do Chrome e extensões;
• tamanho da janela de visualização, zoom e proporção de pixels do dispositivo;
• início e fim pretendidos;
• se o conteúdo foi expandido ou pré-rolado;
• se a página excedeu 15.000 pixels CSS;
• qualquer quadro ausente, superfície incorporada ou valor ativo.

O Screenshot PDF inclui um acessório de captura reproduzível público com um cabeçalho fixo, controle fixo, conteúdo lento, uma tabela, planos de fundo alternados e um ponto final. Use-o para distinguir um problema de captura geral de um problema de layout específico do site.

O que o pipeline não prova

Uma captura de tela visualmente completa não prova autenticidade, admissibilidade legal ou fonte não modificada. Ele registra pixels renderizados de uma sessão do navegador. Mantenha o URL de origem, o tempo de acesso e o contexto relevante separadamente. Quando o serviço de origem oferece uma declaração assinada, exportação estruturada, fatura ou PDF digital, preserve essa fonte mais forte junto com a captura de tela.

O pipeline atual é deliberadamente limitado: mede, captura em posições reais, tenta novamente apenas a limitação conhecida, restaura a página, monta localmente e pede ao usuário para inspecionar a saída. Esses limites são o que tornam uma captura de página longa compreensível e repetível.