Gemma Gem: Agente de IA en el dispositivo para automatización de navegadores a través de WebGPU

Gemma Gem es una extensión de Chrome que carga el modelo Gemma 4 de Google (2B o 4B) a través de WebGPU en un documento fuera de pantalla, dándole herramientas para interactuar directamente con páginas web en el navegador sin llamadas a API externas.

Detalles Clave

La extensión proporciona varias herramientas que se ejecutan en diferentes contextos:

• read_page_content: Leer texto/HTML de la página o un selector CSS (Script de contenido)
• take_screenshot: Capturar la página visible como PNG (Worker de servicio)
• click_element: Hacer clic en un elemento por selector CSS (Script de contenido)
• type_text: Escribir en un campo de entrada por selector CSS (Script de contenido)
• scroll_page: Desplazarse hacia arriba/abajo por cantidad de píxeles (Script de contenido)
• run_javascript: Ejecutar JS en el contexto de la página con acceso completo al DOM (Worker de servicio)

La arquitectura utiliza tres componentes principales:

• Documento fuera de pantalla: Aloja el modelo vía @huggingface/transformers + WebGPU, ejecuta el ciclo del agente
• Worker de servicio: Enruta mensajes entre scripts de contenido y documento fuera de pantalla, maneja take_screenshot y run_javascript
• Script de contenido: Inyecta icono de gema + superposición de chat en DOM sombra, ejecuta herramientas DOM

Configuración y Uso

Requisitos:

• Chrome con soporte WebGPU
• ~500MB de disco para modelo E2B, ~1.5GB para E4B (en caché después de la primera ejecución)

Comandos de configuración:

pnpm install
pnpm build

Carga la extensión en chrome://extensions (modo desarrollador) desde .output/chrome-mv3-dev/.

Uso:

1. Navega a cualquier página
2. Haz clic en el icono de gema (esquina inferior derecha) para abrir el chat
3. Espera a que cargue el modelo (progreso mostrado en icono + chat)
4. Haz preguntas sobre la página o solicita acciones

Ajustes y Configuración

Ajustes disponibles mediante icono de engranaje en cabecera del chat:

• Modelo: Cambiar entre Gemma 4 E2B (~500MB) y E4B (~1.5GB) - selección persiste entre sesiones
• Pensamiento: Activar/desactivar pensamiento nativo de Gemma 4
• Iteraciones máximas: Límite en bucles de llamadas a herramientas por solicitud
• Borrar contexto: Reiniciar historial de conversación para la página actual
• Desactivar en este sitio: Deshabilitar la extensión por nombre de host (persistente)

Desarrollo y Depuración

Tecnologías utilizadas:

• WXT — Framework para extensiones de Chrome (basado en Vite)
• @huggingface/transformers — Inferencia de ML en navegador
• marked — Renderizado de Markdown en chat
• Gemma 4 E2B / E4B (onnx-community/gemma-4-E2B-it-ONNX, onnx-community/gemma-4-E4B-it-ONNX) — Cuantización q4f16, contexto de 128K

Comandos de construcción:

pnpm build        # Construcción de desarrollo (con registro, mapas de origen)
pnpm build:prod   # Construcción de producción (registro silenciado, minimizado)

Ubicaciones de depuración:

• Registros de worker de servicio: chrome://extensions → Gemma Gem → "Inspect views: service worker"
• Registros de documento fuera de pantalla: chrome://extensions → Gemma Gem → "Inspect views: offscreen.html"
• Registros de script de contenido: Abrir DevTools en cualquier página → Consola
• Todas las páginas de extensión: chrome://inspect#other lista todos los contextos de extensión inspeccionables

Los registros del documento fuera de pantalla muestran carga del modelo, construcción de prompts, conteos de tokens, salida cruda del modelo y ejecución de herramientas.

Notas Técnicas

El directorio agent/ tiene cero dependencias y define interfaces (ModelBackend, ToolExecutor) que pueden extraerse como biblioteca independiente. La extensión incluye un modo de pensamiento que muestra razonamiento paso a paso mientras trabaja.

Según la fuente, el agente funciona para preguntas simples sobre páginas y ejecución de JavaScript, pero las cadenas de herramientas de múltiples pasos son poco confiables y a veces ignora sus herramientas por completo.