Gemma Gem: Agente de IA no Dispositivo para Automação de Navegador via WebGPU

Gemma Gem é uma extensão do Chrome que carrega o modelo Gemma 4 da Google (2B ou 4B) através do WebGPU em um documento offscreen, dando a ele ferramentas para interagir diretamente com páginas da web no navegador, sem chamadas de API externas.

Detalhes Principais

A extensão fornece várias ferramentas que são executadas em diferentes contextos:

• read_page_content: Ler texto/HTML da página ou de um seletor CSS (Script de conteúdo)
• take_screenshot: Capturar a página visível como PNG (Service worker)
• click_element: Clicar em um elemento por seletor CSS (Script de conteúdo)
• type_text: Digitar em um campo de entrada por seletor CSS (Script de conteúdo)
• scroll_page: Rolar para cima/baixo por quantidade de pixels (Script de conteúdo)
• run_javascript: Executar JavaScript no contexto da página com acesso total ao DOM (Service worker)

A arquitetura usa três componentes principais:

• Documento offscreen: Hospeda o modelo via @huggingface/transformers + WebGPU, executa o loop do agente
• Service worker: Encaminha mensagens entre scripts de conteúdo e o documento offscreen, lida com take_screenshot e run_javascript
• Script de conteúdo: Injeta o ícone de gema + sobreposição de chat em shadow DOM, executa ferramentas do DOM

Configuração e Uso

Requisitos:

• Chrome com suporte a WebGPU
• ~500MB de disco para o modelo E2B, ~1.5GB para o E4B (armazenado em cache após a primeira execução)

Comandos de configuração:

pnpm install
pnpm build

Carregue a extensão em chrome://extensions (modo desenvolvedor) a partir de .output/chrome-mv3-dev/.

Uso:

1. Navegue até qualquer página
2. Clique no ícone de gema (canto inferior direito) para abrir o chat
3. Aguarde o carregamento do modelo (progresso mostrado no ícone + chat)
4. Faça perguntas sobre a página ou solicite ações

Configurações

Configurações disponíveis através do ícone de engrenagem no cabeçalho do chat:

• Modelo: Alternar entre Gemma 4 E2B (~500MB) e E4B (~1.5GB) - a seleção persiste entre sessões
• Pensamento: Ativar/desativar o pensamento nativo do Gemma 4
• Máximo de iterações: Limite de loops de chamada de ferramentas por solicitação
• Limpar contexto: Redefinir o histórico da conversa para a página atual
• Desativar neste site: Desativar a extensão por nome de host (persistente)

Desenvolvimento e Depuração

Stack tecnológica:

• WXT — Framework de extensão do Chrome (baseado em Vite)
• @huggingface/transformers — Inferência de ML no navegador
• marked — Renderização de Markdown no chat
• Gemma 4 E2B / E4B (onnx-community/gemma-4-E2B-it-ONNX, onnx-community/gemma-4-E4B-it-ONNX) — Quantização q4f16, contexto de 128K

Comandos de build:

pnpm build        # Build de desenvolvimento (com logs, source maps)
pnpm build:prod   # Build de produção (logs silenciados, minificado)

Locais de depuração:

• Logs do service worker: chrome://extensions → Gemma Gem → "Inspect views: service worker"
• Logs do documento offscreen: chrome://extensions → Gemma Gem → "Inspect views: offscreen.html"
• Logs do script de conteúdo: Abra DevTools em qualquer página → Console
• Todas as páginas da extensão: chrome://inspect#other lista todos os contextos de extensão inspecionáveis

Os logs do documento offscreen mostram o carregamento do modelo, construção do prompt, contagens de tokens, saída bruta do modelo e execução de ferramentas.

Notas Técnicas

O diretório agent/ não tem dependências e define interfaces (ModelBackend, ToolExecutor) que podem ser extraídas como uma biblioteca independente. A extensão inclui um modo de pensamento que mostra o raciocínio passo a passo enquanto trabalha.

De acordo com a fonte, o agente funciona para perguntas simples sobre a página e execução de JavaScript, mas cadeias de ferramentas de várias etapas são pouco confiáveis e às vezes ele ignora completamente suas ferramentas.