📸 LiveSnap

Extensão para VS Code que rastreia sites inteiros e captura screenshots em alta resolução de cada página, direto do seu editor.

Instalar no VS Code Marketplace

Índice

• Sobre
• Funcionalidades
• Pré-requisitos
• Instalação
• Como usar
• Comandos
• Configurações
• Sessão autenticada (login)
• Como funciona
• Estrutura do projeto
• Desenvolvimento
• Problemas conhecidos e limitações
• Contribuindo
• Licença

Sobre

LiveSnap é uma extensão para o Visual Studio Code que rastreia (crawl) um site a partir de uma URL inicial e tira screenshots em alta resolução de cada página visitada, sem sair do editor. Por baixo dos panos, a extensão usa o Playwright para controlar um navegador Chromium, seguir os links encontrados em cada página e salvar as capturas automaticamente em uma pasta do seu workspace.

O projeto nasceu como um script Python de linha de comando e foi portado para uma extensão nativa em TypeScript, mantendo o mesmo conjunto de opções — profundidade de rastreamento, domínios permitidos, viewport, sessão autenticada, etc. — agora acessível diretamente pela paleta de comandos do VS Code.

Funcionalidades

• 🕸️ Rastreamento automático (crawl) a partir de uma URL inicial, seguindo os links <a href> encontrados em cada página.
• 🖼️ Screenshots em alta resolução, da página inteira ou apenas da área visível (viewport).
• 🔒 Controle de domínio: restringe o rastreamento ao domínio inicial ou permite seguir para domínios externos.
• 📏 Limite de páginas e profundidade configuráveis, para não rastrear o site inteiro sem querer.
• 🖱️ Scroll automático até o final da página, útil para acionar conteúdo com lazy loading antes da captura.
• 🔑 Sessão autenticada, com perfil persistente do Chromium (cookies, localStorage, IndexedDB) para rastrear páginas que exigem login.
• 🔁 Relogin sob demanda, apagando a sessão salva quando for preciso autenticar novamente.
• 📊 Progresso em tempo real, com barra de progresso cancelável e log detalhado no canal de saída "LiveSnap".
• ⬇️ Download automático do Chromium: se o navegador do Playwright ainda não estiver instalado, a extensão oferece para baixá-lo na primeira execução.
• ⚙️ Totalmente configurável, via settings.json ou interativamente, direto da paleta de comandos.

Pré-requisitos

• Visual Studio Code 1.134.0 ou superior.
• Nada além disso para usar a extensão: o navegador Chromium usado pelo Playwright é baixado automaticamente (mediante confirmação) na primeira vez que você rodar um crawl, caso ainda não esteja instalado.
• Para compilar ou contribuir com o código-fonte, você também vai precisar do Node.js.

Instalação

Via VS Code Marketplace (recomendado)

A forma mais simples é instalar direto do Marketplace:

1. Abra o VS Code.
2. Vá em Extensions (Ctrl+Shift+X) e procure por "LiveSnap".
3. Clique em Install.

Ou instale pela linha de comando:

code --install-extension VictorGabrielBarbosa.livesnap

Você também pode instalar direto pela página da extensão no Marketplace: marketplace.visualstudio.com/items?itemName=VictorGabrielBarbosa.livesnap

A partir do código-fonte

Para testar alterações locais ou gerar seu próprio pacote .vsix:

# Clone o repositório
git clone https://github.com/Victor-Gabriel-Barbosa/livesnap.git
cd livesnap

# Instale as dependências
npm install

# Gere o pacote .vsix
npm run package
npx vsce package

Depois, instale o .vsix gerado:

1. Abra o VS Code.
2. Vá em Extensions → menu "..." → Install from VSIX...
3. Selecione o arquivo .vsix gerado.

Ou, para testar em modo de desenvolvimento: abra o projeto no VS Code e pressione F5 para iniciar uma nova janela com a extensão carregada (Extension Development Host).

Como usar

1. Abra a paleta de comandos (Ctrl+Shift+P no Windows/Linux ou Cmd+Shift+P no macOS).
2. Execute LiveSnap: Crawl & Screenshot Site.
3. Informe a URL inicial do site (ex.: https://exemplo.com).
4. Escolha entre usar as configurações padrão (definidas em settings.json) ou configurar as opções agora — nesse caso a extensão pergunta, passo a passo: pasta de saída, máximo de páginas, profundidade máxima, escopo de domínio, modo do navegador (oculto ou visível), área do screenshot, scroll antes da captura, delay entre páginas, viewport e uso de sessão autenticada.
5. Acompanhe o progresso pela notificação do VS Code (cancelável a qualquer momento) e pelos logs no canal de saída "LiveSnap".
6. Ao final, os screenshots ficam salvos na pasta configurada (screenshots por padrão), na raiz do workspace, nomeados a partir da URL de cada página.

Comandos

Configurações

Todas as opções podem ser definidas em settings.json (prefixo livesnap.) e servem de padrão quando você escolhe "Usar configurações padrão" no comando de crawl:

Sessão autenticada (login)

Sites que exigem autenticação podem ser rastreados habilitando livesnap.login (ou escolhendo essa opção no fluxo interativo). Nesse modo:

• O navegador abre visível (nunca headless) em um perfil persistente salvo em livesnap.profileDir.
• A extensão aguarda você confirmar, em uma caixa de diálogo, que já está logado antes de iniciar o rastreamento.
• Cookies, localStorage e IndexedDB ficam salvos no perfil, então nas próximas execuções não é preciso logar de novo.
• Se já existir um perfil salvo, a extensão pergunta se você quer reaproveitar a sessão ou apagar e logar de novo.
• Para forçar um novo login manualmente a qualquer momento, use o comando LiveSnap: Apagar Sessão Salva (Relogin).

Como funciona

Internamente, o comando de crawl:

1. Cria a pasta de saída (se não existir) e inicializa uma fila (busca em largura) com a URL inicial na profundidade 0.
2. Para cada URL da fila: navega até a página (aguardando a rede ficar ociosa), opcionalmente rola até o final para acionar lazy loading, e tira o screenshot (página inteira ou viewport).
3. Gera um nome de arquivo seguro a partir da URL (host + caminho + query string, sanitizados) para salvar o .png.
4. Extrai todos os links <a href> da página, filtra por domínio (se allDomains estiver desativado) e enfileira os links ainda não visitados, respeitando maxDepth.
5. Aguarda o delay configurado antes de seguir para a próxima página.
6. Repete até esvaziar a fila, atingir maxPages, ou até o usuário cancelar pela notificação de progresso.
7. Ao final, mostra um resumo com páginas visitadas, screenshots salvos e eventuais erros — tudo também registrado no canal de saída "LiveSnap".

Estrutura do projeto

livesnap/
├── src/
│   ├── extension.ts    # Lógica principal: ativação, comandos, crawl e screenshots
│   └── test/           # Testes da extensão
├── icon.png             # Ícone da extensão
├── esbuild.js            # Script de build (bundle da extensão)
├── eslint.config.mjs      # Configuração de lint
├── package.json            # Manifesto da extensão (comandos, configurações, scripts)
├── tsconfig.json            # Configuração do TypeScript
└── CHANGELOG.md               # Histórico de versões

Desenvolvimento

npm install                 # instala as dependências
npm run watch               # build incremental (esbuild + tsc) em modo watch
npm run check-types         # verificação de tipos (tsc --noEmit)
npm run lint                # lint do código em src/
npm test                    # roda os testes (vscode-test)
npm run package             # build de produção (usado no vscode:prepublish)

Pressione F5 no VS Code para abrir uma janela de desenvolvimento (Extension Development Host) com a extensão carregada a partir do código-fonte.

Problemas conhecidos e limitações

• Sites muito grandes ou com muitos links podem gerar um grande volume de screenshots; ajuste maxPages e maxDepth conforme necessário.
• O modo de sessão autenticada depende da confirmação manual do usuário antes de o rastreamento continuar.
• Rastreamento de sites que exigem interações complexas (CAPTCHAs, autenticação multifator) não é tratado automaticamente.

Contribuindo

Contribuições são bem-vindas! Sinta-se à vontade para abrir uma issue ou enviar um pull request com melhorias, correções de bugs ou novas funcionalidades.

Licença

Distribuído sob a licença MIT.