Crop - extensão para Chrome que captura partes específicas de uma página com precisão

(chromewebstore.google.com)

4 pontos por postmelee 2026-06-10 | 3 comentários | Compartilhar no WhatsApp

Olá. Gostaria de apresentar o Crop, uma extensão para Chrome feita para capturar com precisão a parte desejada de uma página da web.

O Crop exibe uma sobreposição sobre a página que você está visualizando no momento e permite apontar com o mouse para selecionar elementos do DOM ou arrastar diretamente uma área para copiar/salvar em PNG.

Achei prático o fluxo de selecionar elementos com precisão no recurso de capturas de tela do Firefox e comecei a criar isso porque queria usar algo semelhante também no Chrome.

Principais recursos

Destaque de elementos do DOM ao passar o mouse
Seleção de elemento com clique
Seleção de área personalizada por arrasto
Mover e redimensionar a área selecionada
Captura do viewport atual
Captura da página inteira
Captura com rolagem de áreas selecionadas que continuam além do viewport
Cópia do PNG para a área de transferência ou salvamento em arquivo

Permissões e privacidade

Como se trata de uma extensão de navegador, imaginei que permissões poderiam ser uma preocupação, então tentei reduzir isso ao máximo.

Atualmente, as permissões usadas são estas.

activeTab: acesso temporário apenas à aba atual em que o usuário executou a extensão
scripting: injeção do script de sobreposição na aba atual
clipboardWrite: cópia do PNG gerado para a área de transferência
downloads: salvamento do PNG gerado

Não solicito permissões amplas como debugger e <all_urls>.

As capturas de tela são processadas localmente dentro do navegador. Nenhuma captura ou dado da página é enviado para um servidor, e também não incluí telemetria. As imagens só vão para a área de transferência ou para os arquivos baixados quando o usuário clica em Copy ou Save.

Limitações atuais

Devido às restrições das extensões do Chrome, há limitações nos casos abaixo.

Não funciona em páginas restritas como chrome:// ou a Chrome Web Store.
O interior de iframes cross-origin não pode ser inspecionado pelo content script, então a seleção de elementos é limitada.
Também não é possível acessar o interior de closed shadow DOM.
A captura de página inteira atualmente funciona com base no documento de nível superior.
Em páginas muito grandes, o PNG pode ser reduzido devido aos limites de canvas do navegador.
Em páginas com muito lazy loading, animações e sticky header/footer, o resultado da montagem da página inteira pode não ficar perfeito.

Sobre a implementação

Foi criado com base no Chrome Manifest V3.

Um content script é injetado na página, e o fluxo de seleção/redimensionamento/captura é tratado em uma sobreposição baseada em Shadow DOM. Para capturar a página inteira ou áreas fora do viewport, ele combina chrome.tabs.captureVisibleTab() com stitching por rolagem.

Parte do código consultado/aplicado a partir do Firefox Screenshots manteve o aviso da MPL-2.0, e o código do projeto escrito do zero foi organizado para distribuição sob a licença MIT. Não é um projeto oficialmente afiliado nem endossado pela Mozilla/Firefox.

Links

Chrome Web Store:
https://chromewebstore.google.com/detail/crop/…

GitHub:
https://github.com/postmelee/crop

Se você costuma capturar páginas da web com frequência — para escrever documentação, relatar bugs ou revisar UI, por exemplo — ficarei grato se testar e deixar comentários sobre pontos incômodos ou ideias de melhoria.

3 comentários

totopapa 2026-06-12

Instalei ontem e estou usando desde então.
Eu sempre selecionava a área arrastando o mouse, então isso tornou tudo bem mais prático. Obrigado.
Acho que pode haver um pequeno erro.
Tanto ao copiar quanto ao baixar, parece que está sendo adicionada uma margem branca desnecessária no lado direito da imagem.
Testei no ambiente MacOS, Chrome.

postmelee 2026-06-12

Olá, obrigado pela informação. No meu ambiente local com macOS + Chrome, esse mesmo problema de margem branca ainda não pôde ser reproduzido.

Pode ser uma diferença de ambiente, então você poderia compartilhar a versão do macOS/Chrome/Crop, o zoom do Chrome, a escala da tela, a página em que o problema ocorreu e uma captura de tela da imagem resultante? Se for possível comparar a área selecionada com a imagem final, isso ajudará a identificar a causa.

Se puder, por favor crie uma issue usando o formulário de relatório de bug abaixo. Preparei os campos para que possamos verificar todas as informações necessárias sem deixar nada passar.

https://github.com/postmelee/crop/issues/new?template=bug_report.yml

Você pode registrar por esse link ou, se preferir, adicionar mais informações neste comentário também.

Assim que eu conseguir confirmar, vou acompanhar isso em uma issue de bug separada.