Agent skill · software engineering · aradotso
gemma-gem-browser-ai
Build and extend Gemma Gem, an on-device AI browser assistant Chrome extension running Google's Gemma 4 model via WebGPU with no cloud dependencies.
Why this skill is useful
Adds executable scripts and a complete architecture for building a Chrome extension that integrates an on-device AI model with specific tool interfaces and functionalities.
What it needs
Requires node, pnpm installed locally. About 6k tokens when loaded. Last updated 2026-07-09. 70 stars on the source repository.
What this skill does
Gemma Gem Browser AI Skill by ara.so — Daily 2026 Skills collection. Gemma Gem is a Chrome extension that runs Google's Gemma 4 model entirely on-device via WebGPU. It injects a chat overlay into every page and exposes a tool-calling agent loop that can read pages, click elements, fill forms, execute JavaScript, and take screenshots — all without sending data to any server. Architecture Overview Offscreen document (offscreen/): Loads the ONNX model via @huggingface/transformers, runs the agent loop, streams tokens. Service worker (background/): Routes messages, handles takescreenshot and runjavascript. Content script (content/): Injects shadow DOM chat UI, executes DOM tools. agent/: Zero-dependency module defining ModelBackend and ToolExecutor interfaces — extractable as a standalone library. Install & Build Load the extension: 1. Open chrome://extensions 2. Enable Developer mode 3. Click Load unpacked → select .output/chrome-mv3-dev/ Model download happens automatically on first chat open: onnx-community/gemma-4-E2B-it-ONNX — ~500 MB (default) onnx-community/gemma-4-E4B-it-ONNX — ~1.5 GB Models are cached in the browser's cache storage after the first run. Key Interfaces (agent/) ModelBackend ToolExecutor Agent Loop Built-in Tools Tool Location Description ------ ---------- ------------- readpagecontent Content script Read page text/HTML or a CSS selector takescreenshot Service worker Capture visible tab as PNG clickelement Content script Click by CSS selector typetext Content script Type into input by CSS selector scrollpage Content script Scroll by pixel amount runjavascript Service worker Execute JS in page context Adding a New Tool Tools live in two places: the definition (in the offscreen agent) and the executor (in content script or service worker). …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aradotso/gemma-gem-browser-ai