Gemma Gem: WebGPU를 통한 브라우저 자동화를 위한 온디바이스 AI 에이전트

Gemma Gem은 오프스크린 문서에서 WebGPU를 통해 Google의 Gemma 4 모델(2B 또는 4B)을 로드하는 Chrome 확장 프로그램으로, 외부 API 호출 없이 브라우저에서 직접 웹페이지와 상호작용할 수 있는 도구를 제공합니다.

주요 세부사항

이 확장 프로그램은 다양한 컨텍스트에서 실행되는 여러 도구를 제공합니다:

• read_page_content: 페이지 또는 CSS 선택자의 텍스트/HTML 읽기 (콘텐츠 스크립트)
• take_screenshot: 보이는 페이지를 PNG로 캡처 (서비스 워커)
• click_element: CSS 선택자로 요소 클릭 (콘텐츠 스크립트)
• type_text: CSS 선택자로 입력 필드에 텍스트 입력 (콘텐츠 스크립트)
• scroll_page: 픽셀 단위로 페이지 위/아래 스크롤 (콘텐츠 스크립트)
• run_javascript: 전체 DOM 접근 권한으로 페이지 컨텍스트에서 JS 실행 (서비스 워커)

아키텍처는 세 가지 주요 구성 요소를 사용합니다:

• 오프스크린 문서: @huggingface/transformers + WebGPU를 통해 모델을 호스팅하고 에이전트 루프 실행
• 서비스 워커: 콘텐츠 스크립트와 오프스크린 문서 간 메시지 라우팅, take_screenshot 및 run_javascript 처리
• 콘텐츠 스크립트: 젬 아이콘 + 섀도우 DOM 채팅 오버레이 주입, DOM 도구 실행

설정 및 사용법

요구사항:

• WebGPU 지원 Chrome
• E2B 모델용 ~500MB 디스크 공간, E4B용 ~1.5GB (첫 실행 후 캐시됨)

설정 명령어:

pnpm install
pnpm build

chrome://extensions에서 개발자 모드로 .output/chrome-mv3-dev/에서 확장 프로그램을 로드하세요.

사용법:

1. 원하는 페이지로 이동
2. 젬 아이콘(오른쪽 하단 모서리)을 클릭하여 채팅 열기
3. 모델 로딩 대기(아이콘 및 채팅에 진행 상황 표시)
4. 페이지에 대한 질문을 하거나 작업을 요청

설정 및 구성

채팅 헤더의 기어 아이콘을 통해 사용 가능한 설정:

• 모델: Gemma 4 E2B(~500MB)와 E4B(~1.5GB) 간 전환 - 선택사항은 세션 간 유지
• 생각하기: 기본 Gemma 4 사고 모드 토글
• 최대 반복 횟수: 요청당 도구 호출 루프 제한
• 컨텍스트 지우기: 현재 페이지에 대한 대화 기록 초기화
• 이 사이트에서 비활성화: 호스트명별 확장 프로그램 비활성화(유지됨)

개발 및 디버깅

기술 스택:

• WXT — Chrome 확장 프로그램 프레임워크 (Vite 기반)
• @huggingface/transformers — 브라우저 ML 추론
• marked — 채팅에서 마크다운 렌더링
• Gemma 4 E2B / E4B (onnx-community/gemma-4-E2B-it-ONNX, onnx-community/gemma-4-E4B-it-ONNX) — q4f16 양자화, 128K 컨텍스트

빌드 명령어:

pnpm build        # 개발 빌드 (로깅, 소스 맵 포함)
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 실행에는 작동하지만, 다단계 도구 체인은 신뢰할 수 없으며 때로는 도구를 완전히 무시하기도 합니다.