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

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.