Xcrap Logo

DOM Extractor

Extração de dados diretamente no navegador com @xcrap/dom.

O pacote @xcrap/dom é a versão do motor de extração otimizada para rodar dentro do navegador. Ele é ideal para extensões, scripts de automação e Web Scraping que ocorre via injeção de script.

Por que usar o @xcrap/dom?

  1. Nativo do Browser: Utiliza DOMParser e XPathResult nativos, sendo extremamente leve.
  2. Mesma Sintaxe: Usa os mesmos builders css(), xpath() e modelos declarativos do Xcrap padrão.
  3. Client-Side First: Não depende de Node.js ou JSDOM.

Importação (ESModules)

O @xcrap/dom é distribuído exclusivamente como ESModules. Certifique-se de usar import em vez de require.

import { DomParser, css, extract } from "@xcrap/dom";

Uso no Tampermonkey (com Vite)

Se você usa o vite-plugin-monkey para criar seus UserScripts, o @xcrap/dom é o companheiro perfeito.

import { DomParser, DomExtractionModel, css, extract } from "@xcrap/dom";

// Captura o HTML da página atual no Tampermonkey
const html = document.documentElement.outerHTML;
const parser = new DomParser(html);

const model = new DomExtractionModel({
    price: {
        query: css(".product-price"),
        extractor: extract("innerText")
    }
});

const data = parser.extractModel({ model });
console.log("Extraído via Tampermonkey:", data);

Uso no Puppeteer (page.evaluate)

Você pode injetar o @xcrap/dom em uma página Puppeteer para realizar extrações complexas sem precisar baixar o HTML para o Node.js.

// No seu script Node.js
await page.addScriptTag({ url: 'https://cdn.jsdelivr.net/npm/@xcrap/dom/dist/index.js' });

const data = await page.evaluate(() => {
    // Agora o Xcrap DOM está disponível no contexto do navegador
    const parser = new DomParser(document.documentElement.outerHTML);
    // ... lógica de extração
    return parser.extractModel({ model: myModel });
});

Principais Diferenças

Ao contrário do @xcrap/extractor (que roda em Node.js), o @xcrap/dom:

  • Não é assíncrono: As extrações são síncronas, pois o DOM já está carregado na memória.
  • Acesso Direto: Pode acessar propriedades do objeto window e elementos ao vivo se necessário.

On this page