Gemma Gem: Встроенный ИИ-агент для автоматизации браузера через WebGPU

Gemma Gem — это расширение для Chrome, которое загружает модель Gemma 4 от Google (2B или 4B) через WebGPU в автономном документе, предоставляя ему инструменты для взаимодействия с веб-страницами непосредственно в браузере без внешних API-вызовов.

Ключевые детали

Расширение предоставляет несколько инструментов, работающих в разных контекстах:

• read_page_content: Чтение текста/HTML страницы или CSS-селектора (Контентный скрипт)
• take_screenshot: Захват видимой части страницы в формате PNG (Сервисный работник)
• click_element: Клик по элементу через CSS-селектор (Контентный скрипт)
• type_text: Ввод текста в поле через CSS-селектор (Контентный скрипт)
• scroll_page: Прокрутка вверх/вниз на указанное количество пикселей (Контентный скрипт)
• run_javascript: Выполнение JS в контексте страницы с полным доступом к DOM (Сервисный работник)

Архитектура использует три основных компонента:

• Автономный документ: Размещает модель через @huggingface/transformers + WebGPU, запускает цикл агента
• Сервисный работник: Маршрутизирует сообщения между контентными скриптами и автономным документом, обрабатывает take_screenshot и run_javascript
• Контентный скрипт: Внедряет значок-самоцвет и чат-оверлей в теневом DOM, выполняет инструменты для работы с DOM

Установка и использование

Требования:

• Chrome с поддержкой WebGPU
• ~500 МБ дискового пространства для модели E2B, ~1.5 ГБ для E4B (кэшируется после первого запуска)

Команды установки:

pnpm install
pnpm build

Загрузите расширение в chrome://extensions (режим разработчика) из .output/chrome-mv3-dev/.

Использование:

1. Перейдите на любую страницу
2. Нажмите на значок-самоцвет (в правом нижнем углу), чтобы открыть чат
3. Дождитесь загрузки модели (прогресс отображается на значке и в чате)
4. Задавайте вопросы о странице или запрашивайте действия

Настройки и конфигурация

Доступные настройки через значок шестерёнки в заголовке чата:

• Модель: Переключение между Gemma 4 E2B (~500 МБ) и E4B (~1.5 ГБ) — выбор сохраняется между сеансами
• Мышление: Включение/выключение нативного мышления Gemma 4
• Максимум итераций: Ограничение на циклы вызова инструментов для одного запроса
• Очистить контекст: Сброс истории разговора для текущей страницы
• Отключить на этом сайте: Отключить расширение для конкретного домена (сохраняется)

Разработка и отладка

Технологический стек:

• WXT — Фреймворк для расширений Chrome (на основе Vite)
• @huggingface/transformers — ML-инференс в браузере
• marked — Рендеринг Markdown в чате
• Gemma 4 E2B / E4B (onnx-community/gemma-4-E2B-it-ONNX, onnx-community/gemma-4-E4B-it-ONNX) — квантизация q4f16, контекст 128K

Команды сборки:

pnpm build        # Сборка для разработки (с логированием, source maps)
pnpm build:prod   # Продакшен-сборка (логирование отключено, минифицировано)

Места для отладки:

• Логи сервисного работника: chrome://extensions → Gemma Gem → "Inspect views: service worker"
• Логи автономного документа: chrome://extensions → Gemma Gem → "Inspect views: offscreen.html"
• Логи контентного скрипта: Откройте DevTools на любой странице → Console
• Все страницы расширения: chrome://inspect#other перечисляет все инспектируемые контексты расширения

Логи автономного документа показывают загрузку модели, построение промптов, количество токенов, сырой вывод модели и выполнение инструментов.

Технические примечания

Директория agent/ не имеет зависимостей и определяет интерфейсы (ModelBackend, ToolExecutor), которые могут быть извлечены в виде отдельной библиотеки. Расширение включает режим мышления, который показывает цепочку рассуждений по мере работы.

Согласно источнику, агент работает для простых вопросов о странице и выполнения JavaScript, но многошаговые цепочки инструментов ненадёжны, и иногда он полностью игнорирует свои инструменты.