Sense

A Chrome extension that provides contextual meaning for selected text on any webpage, powered by a locally-running LLM via WebGPU.

Unlike dictionary extensions (Apple Look Up, Google Dictionary) that give generic definitions, or paid AI tools with limits, Sense:

• Understands the context around your selection
• Runs 100% locally on your device (no API calls, no data sent anywhere)
• Has no usage limits - use it as much as you want

How It Works

1. Select any text on a webpage
2. A tooltip appears with the contextual meaning
3. The AI understands the surrounding text, page topic, and domain to give you a relevant explanation

Requirements

• Chrome 113+ (for WebGPU support)
• Storage for AI model (choose one):
  • Qwen2 0.5B: ~300MB (faster, good for basic lookups)
  • SmolLM2 1.7B: ~900MB (better quality, recommended for complex text)
• A GPU (integrated or dedicated) for fast inference

Installation

From Source

1. Clone or download this repository
2. Install dependencies and build:

   npm install
   npm run build

3. Open Chrome and go to chrome://extensions/
4. Enable "Developer mode" (top right)
5. Click "Load unpacked" and select the dist folder

First Run

1. Click the Sense extension icon in the toolbar
2. Click "Download & Initialize Model" (~300MB download, one-time)
3. Wait for the model to load (progress shown in popup)
4. Once ready, select any text on any webpage!

Usage

• Select text: Tooltip appears automatically with contextual meaning
• Press Escape: Dismiss the tooltip
• Click elsewhere: Dismiss the tooltip
• Side Panel: Click extension icon → "Open Side Panel" for history

Build Commands

Command	Mode	OAuth Client ID	Source Maps	Use Case
npm run dev	Development (watch)	Dev (local)	Yes	Local development with auto-rebuild
npm run build	Development	Dev (local)	Yes	One-time dev build for testing
npm run build:prod	Production	Prod (Chrome Web Store)	No	Production build
npm run zip	Production + ZIP	Prod (Chrome Web Store)	No	Build and package for Chrome Web Store upload

Environment Configuration

OAuth client IDs are managed through environment files:

• env.dev.js — OAuth client ID for local unpacked extension
• env.prod.js — OAuth client ID for Chrome Web Store extension

The correct client ID is injected into manifest.json at build time based on the build mode.

Development

npm install
npm run dev

1. Open Chrome and go to chrome://extensions
2. Enable "Developer mode"
3. Click "Load unpacked" and select the dist folder
4. The extension auto-rebuilds on file changes — reload the extension to pick up changes

Publishing to Chrome Web Store

npm run zip

Upload sense-extension.zip to the Chrome Web Store Developer Dashboard.

Architecture

sense/
├── src/
│   ├── content/           # Content script (selection, tooltip)
│   ├── background/        # Service worker (message routing)
│   ├── offscreen/         # Offscreen document (WebLLM/WebGPU)
│   ├── popup/             # Extension popup UI
│   ├── sidepanel/         # Side panel UI
│   └── shared/            # Shared types and utilities
├── dist/                  # Built extension (load this in Chrome)
└── assets/                # Icons

Tech Stack

• LLM Framework: WebLLM - WebGPU-accelerated inference
• Model: Qwen2-0.5B-Instruct (q4f16 quantized, ~300MB)
• Build: TypeScript, Webpack
• UI: Shadow DOM for CSS isolation

License

MIT