Chrome extension

Visually pick elements, view your history, and share exact UI context directly with your AI assistant.

Extension Screenshot Placeholder

Overview

The Grip extension enhances your Chrome browser with a visual element picker, session history, and an MCP status badge. It acts as the visual frontend for the Grip CLI, allowing you to seamlessly share exactly what you are seeing with your AI IDE.

  • Visual Picking: Click any element to automatically extract robust CSS selectors and copy its context.
  • Session History: View a running log of everything you and your AI have interacted with during the session.
  • Status Badge: Instantly know when your browser is actively connected to an MCP tool.

Installation

Build the extension bundle locally:

pnpm --filter @grip/extension build

Load it in Chrome:

  1. Open chrome://extensions
  2. Enable Developer mode (top right)
  3. Click Load unpacked → select the packages/extension/dist directory

For active development, run pnpm --filter @grip/extension dev and click the reload icon on the extension card when you make changes.

Usage Modes

Grip provides three distinct ways to interact with the extension UI, depending on your workflow:

  • Popup — Click the Grip icon in the Chrome toolbar. Compact and quick; ideal for a single quick interaction.
  • DevTools Panel — Open Chrome DevTools and switch to the Grip panel. Best for persistent debugging, as it stays open alongside your console and network tabs.
  • Floating Tray — A small, unobtrusive button injected directly into the bottom-right of the web page. Expands into a full panel without needing to open DevTools.