2024 年網頁自動化：LLM 與瀏覽器實戰

IA + Navegador: Como Automatizar a Web com LLMs em 2024

Introdução

Nos últimos dias, termos como “AI browser automation” e “LLM web bots” dispararam no Google Trends e no Hacker News. A combinação de grandes modelos de linguagem (GPT‑4, Claude 2, Llama 2) com APIs de controle de navegadores está transformando tarefas repetitivas em processos totalmente autônomos. Se você já cansou de preencher formulários manualmente, raspar dados página a página ou gerar relatórios a partir de dashboards, este artigo mostra, passo a passo, como colocar um agente de IA dentro do Chrome (ou Edge) e deixar que ele faça o trabalho pesado por você.

Por que isso importa agora

Esses fatores criam um ponto de inflexão: a IA deixa de ser apenas um assistente de texto e se torna co‑piloto ativo dentro do navegador.

Arquitetura resumida

graph TD
    A[LLM (GPT‑4/Claude/Llama2)] --> B[Orquestrador (FastAPI/Node.js)]
    B --> C[Extensão/Agent (JS – Manifest V3)]
    C --> D[Chrome DevTools Protocol (CDP)]
    D --> E[Navegador (Chrome/Edge)]
    B --> F[Sandbox de segurança (Docker/Firejail)]

1. LLM: gera prompts e interpreta respostas.
2. Orquestrador: recebe eventos do navegador, envia prompts ao LLM e devolve instruções.
3. Extensão/Agent: roda JavaScript dentro da página e executa os comandos recebidos.
4. CDP: permite manipular DOM, capturar screenshots e interceptar requisições.
5. Sandbox: isola o processo de IA, protege tokens e controla recursos.

Ferramentas essenciais

Tutorial prático – Do zero ao agente que preenche formulários

1. Preparar o ambiente

# 1️⃣ Crie um virtualenv Python
python -m venv .venv && source .venv/bin/activate

# 2️⃣ Instale dependências
pip install fastapi uvicorn openai playwright

# 3️⃣ Instale o driver do navegador (Playwright)
playwright install chromium

2. Orquestrador FastAPI (Python)

# app.py
import os, json, asyncio
from fastapi import FastAPI, WebSocket
from openai import AsyncOpenAI
from playwright.async_api import async_playwright

app = FastAPI()
client = AsyncOpenAI(api_key=os.getenv("OPENAI_API_KEY"))

# WebSocket para comunicação em tempo real com a extensão
@app.websocket("/ws")
async def ws_endpoint(ws: WebSocket):
    await ws.accept()
    async with async_playwright() as p:
        browser = await p.chromium.launch(headless=False)
        page = await browser.new_page()
        await page.goto("https://example.com/login")

        while True:
            data = await ws.receive_text()
            request = json.loads(data)          # {action:"fill", selector:"#email", value:""}
            if request["action"] == "fill":
                # Prompt para o LLM gerar valor (ex.: email aleatório)
                prompt = f"Generate a realistic email for testing."
                resp = await client.chat.completions.create(
                    model="gpt-4o-mini",
                    messages=[{"role":"user","content":prompt}],
                    stream=False,
                )
                value = resp.choices[0].message.content.strip()
                await page.fill(request["selector"], value)
                await ws.send_text(json.dumps({"status":"filled","selector":request["selector"],"value":value}))

Dica: Use stream=True para obter respostas em tempo real e atualizar a UI da extensão imediatamente.

3. Extensão Chrome (Manifest V3)

// manifest.json
{
  "name": "IA Form Filler",
  "manifest_version": 3,
  "permissions": ["scripting", "activeTab", "webNavigation"],
  "background": { "service_worker": "bg.js" },
  "action": { "default_popup": "popup.html" }
}

// bg.js – abre WebSocket com o orquestrador
chrome.runtime.onInstalled.addListener(() => {
  const ws = new WebSocket("ws://localhost:8000/ws");
  ws.onmessage = (e) => console.log("IA:", e.data);
  chrome.action.onClicked.addListener(async (tab) => {
    ws.send(JSON.stringify({action:"fill", selector:"#email"}));
  });
});

Resultado: Ao clicar no ícone da extensão, o agente IA gera um e‑mail válido e preenche o campo #email da página aberta.

4. Executar tudo

# 1️⃣ Inicie o orquestrador
uvicorn app:app --reload --port 8000

# 2️⃣ Carregue a extensão no Chrome (chrome://extensions → "Modo de desenvolvedor" → "Carregar sem compactação")
# 3️⃣ Abra https://example.com/login e clique no ícone da extensão.

Caso de uso real – Monitoramento de preços em e‑commerce

1. Objetivo: Detectar variações de preço de um produto a cada 15 min e enviar alerta por Telegram.
2. Fluxo:
   • Extensão captura preço (document.querySelector('.price').innerText).
   • Envia ao orquestrador via WebSocket.
   • LLM compara com histórico (armazenado em SQLite) e decide se envia alerta.
   • Caso positivo, o orquestrador usa a API do Telegram para notificar.

Script resumido (Node.js + Playwright)

// monitor.js
const { chromium } = require('playwright');
const { OpenAI } = require('openai');
const sqlite3 = require('sqlite3').verbose();
const telegram = require('node-telegram-bot-api');

const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });
const bot = new telegram(process.env.TELEGRAM_BOT_TOKEN);
const db = new sqlite3.Database('prices.db');

(async () => {
  const browser = await chromium.launch({ headless: true });
  const page = await browser.newPage();
  await page.goto('https://store.example.com/product/123');

  const priceText = await page.textContent('.price');
  const price = parseFloat(priceText.replace(/[^\d.,]/g, '').replace(',', '.'));

  db.get('SELECT last_price FROM product WHERE id = 123', async (err, row) => {
    const last = row?.last_price ?? price;
    const prompt = `O preço atual é R$${price}. O último preço registrado foi R$${last}. Deve eu avisar o usuário? Responda apenas "sim" ou "não".`;
    const resp = await openai.chat.completions.create({
      model: "gpt-4o-mini",
      messages: [{ role: "user", content: prompt }],
    });
    if (resp.choices[0].message.content.trim().toLowerCase() === "sim") {
      await bot.sendMessage(process.env.TELEGRAM_CHAT_ID,
        `📉 Preço caiu! De R$${last} para R$${price}.`);
    }
    db.run('INSERT OR REPLACE INTO product (id, last_price) VALUES (123, ?)', price);
  });

  await browser.close();
})();

**Agendamento

Herramienta mencionada: Groq Cloud