Inspecionar Console e Script JS: Extrator Automático de Cards e Dados

---

@CanalQb no YouTube

---

Script JS: Extrator Automático de Cards e Dados

---

⚠️ Este script é para fins educacionais. Use apenas em sites onde você tem permissão para coletar dados e respeite os termos de uso de cada plataforma.

---

Se você já precisou coletar dados de uma página com dezenas ou centenas de cards — nomes, links, números — sabe o quanto fazer isso manualmente é tedioso e demorado. Este script JavaScript roda direto no console do navegador e automatiza tudo isso para você: extrai as informações, acumula os resultados e salva arquivos .txt ao longo da execução. Simples, direto e adaptável para qualquer site.

🎯 O Que Este Script Faz

O extrator foi desenvolvido para funcionar como um motor genérico de raspagem baseado em seletores CSS. Com ele você consegue, de forma totalmente automatizada:

📌 Localizar Cards

Identifica os blocos de dados na página usando seletores CSS definidos por você.

📋 Extrair Dados

Coleta nome, inscritos, link ou qualquer outro dado presente dentro de cada card.

💾 Acumular Resultados

Guarda tudo numa variável global (window.acumulado) durante toda a sessão.

🖱️ Clicar Automaticamente

Detecta e clica no botão "Show more" para carregar mais resultados sem intervenção manual.

📁 Gerar Arquivos .txt

Salva os dados em lotes a cada ciclo e um arquivo final com tudo acumulado.

🗑️ Remover Elementos

Opcionalmente, remove do DOM cada card já processado para liberar memória na página.

🧠 Como o Script Funciona

O funcionamento é dividido em quatro blocos principais que se encadeiam automaticamente:

1

Configuração dos Seletores — Você define, em um único objeto CONFIG, quais elementos HTML serão lidos, clicados ou removidos. É a única parte que você precisa alterar ao adaptar para outro site.

2

Extração de Dados — A função extrairCards() percorre todos os cards encontrados, coleta os campos configurados e evita duplicatas usando um Set interno de links já processados.

3

Automação de Clique — A função clicarShowMore() localiza o botão de carregamento e o clica. Após o clique, o loop aguarda 8 segundos para os novos cards renderizarem antes de reiniciar.

4

Finalização e Salvamento — Quando não há mais botão "Show more", o script salva o arquivo final com todos os dados acumulados e encerra o loop automaticamente.

⚙️ A Variável CONFIG — O Coração do Script

Toda a inteligência de adaptação está concentrada neste objeto. Você não precisa mexer no motor do script — apenas nessa configuração:

const CONFIG = {
    // 🔎 Card principal que contém os dados
    CARD_SELECTOR: 'div.col-12.col-sm-6.col-md-4',

    // 🏷 Nome do canal
    NOME_SELECTOR: '.font-16.text-dark',

    // 👥 Número de inscritos
    SUBS_SELECTOR: '.font-12.text-truncate b',

    // 🔗 Link do canal
    LINK_SELECTOR: 'a[href*="/channel/"]',

    // 🔘 Botão que será clicado automaticamente
    BOTAO_SELECTOR: 'button.lm-button',

    // 🗑 Remove o card após extrair os dados?
    REMOVER_CARD: false
};

📌 O Que Cada Seletor Controla

Variável	Função	Exemplo alternativo
CARD_SELECTOR	Define o bloco raiz de cada card. Tudo dentro dele é consultado.	.produto, .item-card
NOME_SELECTOR	Onde o script busca o nome ou título do item.	.titulo, h2.nome
SUBS_SELECTOR	Onde buscar um dado numérico (inscritos, preço, avaliação etc.).	.preco, span.rating
LINK_SELECTOR	Qual link capturar. Pode usar atributos parciais com [href*="termo"].	.link-produto, a[href*="loja"]
BOTAO_SELECTOR	O botão que carrega mais resultados na página.	button.load-more, .btn-ver-mais
REMOVER_CARD	true remove o elemento do DOM após extrair; false mantém.	—

🔄 Fluxo Interno Simplificado

Loop:
  ↓ Busca cards usando CARD_SELECTOR
  ↓ Extrai dados usando os seletores internos
  ↓ Salva lote em arquivo .txt
  ↓ Acumula em window.acumulado
  ↓ Clica no BOTAO_SELECTOR
  ↓ Aguarda 8 segundos
  ↓ Repete até não haver mais botão
  ↓ Salva arquivo final acumulado

🚀 Script Completo — Cole no Console do seu navegador

Abra o console do navegador (F12 → aba Console), cole o código abaixo e pressione Enter. O processo começa automaticamente:

 (function initTGStatExtractor() {
    window.acumulado = window.acumulado || '';

    // ⚙️ Ajuste aqui os tempos conforme necessário
    const CONFIG = {
        delayAposDetectar: 8000, // espera após detectar novos cards (ms)
        intervaloPolling: 2000, // intervalo entre cada verificação (ms)
        maxTentativas: 20, // tentativas antes de desistir
    };

    function escapar(valor) {
        return `'${valor.replace(/'/g, "\\'")}'`;
    }

    function extrairEDeletar() {
        const cards = document.querySelectorAll('div.col-12.col-sm-6.col-md-4');
        if (cards.length === 0) return '';

        let lote = '';

        cards.forEach(card => {
            try {
                const nome = card.querySelector('.font-16.text-dark')?.innerText.trim() || '';
                const subs = card.querySelector('.font-12.text-truncate b')?.innerText.trim() || '';
                const link = card.querySelector('a[href*="/channel/"]')?.href.trim() || '';

                if (nome && subs && link) {
                    const linha = `${escapar(nome)};${escapar(subs)};${escapar(link)}`;
                    lote += linha + '\n';
                    window.acumulado += linha + '\n';
                }
            } catch (e) {
                console.error('Erro ao processar card', e);
            } finally {
                card.remove();
            }
        });

        console.log(`Cards extraídos e deletados: ${lote ? lote.split('\n').length - 1 : 0}`);
        return lote;
    }

    function clicarShowMore() {
        const botao = document.querySelector('button.lm-button');
        if (botao && botao.innerText.toLowerCase().includes('show')) {
            botao.click();
            console.log("Botão 'Show more' clicado!");
            return true;
        }
        console.log("Nenhum botão 'Show more' encontrado.");
        return false;
    }

    function salvarCSV(conteudo, nomeArquivo) {
        if (!conteudo?.trim()) return;
        const cabecalho = `'nome';'subscribers';'link'\n`;
        const blob = new Blob([cabecalho + conteudo], { type: 'text/csv;charset=utf-8;' });
        const url = URL.createObjectURL(blob);
        const a = Object.assign(document.createElement('a'), { href: url, download: nomeArquivo });
        document.body.appendChild(a);
        a.click();
        a.remove();
        URL.revokeObjectURL(url);
        console.log(`Arquivo salvo: ${nomeArquivo}`);
    }

    function aguardarNovosCards(callback, tentativas = 0) {
        const cards = document.querySelectorAll('div.col-12.col-sm-6.col-md-4');
        if (cards.length > 0) {
            console.log(`Cards detectados! Aguardando ${CONFIG.delayAposDetectar / 1000}s antes de continuar...`);
            setTimeout(callback, CONFIG.delayAposDetectar);
        } else if (tentativas < CONFIG.maxTentativas) {
            console.log(`Aguardando cards... tentativa ${tentativas + 1}/${CONFIG.maxTentativas}`);
            setTimeout(() => aguardarNovosCards(callback, tentativas + 1), CONFIG.intervaloPolling);
        } else {
            console.warn('Timeout: novos cards não apareceram.');
            salvarCSV(window.acumulado, `todos_cards_acumulados_${Date.now()}.csv`);
        }
    }

    function loop() {
        const lote = extrairEDeletar();

        if (lote) {
            const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
            salvarCSV(lote, `cards_lote_${timestamp}.csv`);
        }

        const clicou = clicarShowMore();

        if (clicou) {
            aguardarNovosCards(loop);
        } else {
            console.log('Todos os cards carregados. Salvando acumulado...');
            salvarCSV(window.acumulado, `todos_cards_acumulados_${Date.now()}.csv`);
        }
    }

    loop();
 })();

📥 Teste Extra — Download Manual dos Dados Acumulados

Caso queira baixar os dados já acumulados até o momento sem esperar o fim da execução automática, rode este trecho separado no console:

(function baixarAcumulado() {
    if (!window.acumulado || window.acumulado.trim() === '') {
        console.log("Nenhum dado acumulado ainda.");
        return;
    }
    const blob = new Blob([window.acumulado], {type: "text/plain"});
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = `todos_cards_acumulados_${Date.now()}.txt`;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
    console.log("Arquivo TXT completo gerado com os cards acumulados!");
})();

🛠️ Como Adaptar Para Outro Site

O motor do script não muda. O único trabalho é inspecionar o HTML do novo site (clique direito → Inspecionar) e identificar as classes corretas para preencher o CONFIG. Veja um exemplo com uma loja virtual fictícia:

Estrutura HTML do outro site

<div class="produto">
   <h2 class="titulo">Nome do Produto</h2>
   <span class="preco">R$ 99,90</span>
   <a class="link-produto" href="/produto/1">Ver mais</a>
</div>

CONFIG adaptado

CARD_SELECTOR: '.produto',
NOME_SELECTOR: '.titulo',
SUBS_SELECTOR: '.preco',
LINK_SELECTOR: '.link-produto'

Todo o resto — o loop, o salvamento dos arquivos, a prevenção de duplicatas, o clique automático — continua funcionando sem nenhuma outra alteração.

🧱 Estrutura Recomendada ao Criar Seu Próprio Script

1

Definir o objeto CONFIG com todos os seletores necessários.

2

Criar a variável acumuladora (window.acumulado).

3

Criar a função extrair() que percorre os cards e coleta os dados.

4

Criar a função clicarBotao() para automação do carregamento.

5

Criar a função salvarArquivo() usando Blob e link temporário.

6

Montar o loop principal com setTimeout entre as iterações.

💡 Gostou do Script?

Acompanhe o @CanalQb no YouTube para mais scripts práticos, tutoriais de automação e conteúdo sobre Web3, testnets e ferramentas úteis para quem vive online.

🏁 Conclusão

Este extrator funciona como um motor genérico de raspagem baseado em seletores CSS. A parte crítica é sempre a variável CONFIG, onde você define o que será lido, o que será clicado e o que será removido. Alterando apenas esses seletores, o mesmo script consegue funcionar em praticamente qualquer site que utilize estrutura repetitiva — sejam cards, listas, grids ou tabelas.

A variável global window.acumulado garante que nenhum dado seja perdido mesmo que o download de um lote falhe. E o sistema de deduplicação por Set assegura que cada registro apareça uma única vez no arquivo final, independente de quantas vezes a página seja percorrida.

Salve este post, adapte o CONFIG para o seu caso e coloque para rodar. Qualquer dúvida, deixa nos comentários ou passa lá no canal!

---

⚠️ Este conteúdo é estritamente educacional. Respeite sempre os Termos de Uso de cada plataforma antes de executar qualquer tipo de automação ou coleta de dados.