Chrome extension

Pick elements on any page, view history, and use the same UI from the toolbar, DevTools, or a floating panel.

What you get

The Grip extension adds element picking, session history, and console log capture to Chrome. All surfaces — popup, DevTools panel, and in-page floating tray — share one UI from @grip/devtools, so you get the same experience everywhere.

  • Pick any element and copy selectors or MCP context
  • History of picks for the current session
  • MCP badge showing whether Chrome debugging is connected

Install the extension

Build the extension bundle:

pnpm --filter @grip/extension build

Load it in Chrome:

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

For active development, run pnpm --filter @grip/extension dev and reload the extension after changes.

Three ways to open Grip

  • Popup — click the Grip icon in the toolbar. Compact and quick; can close after a successful pick.
  • DevTools panel — open Chrome DevTools and switch to the Grip panel. Stays open while you debug; syncs session with the background worker.
  • Floating tray — a button on the page itself (bottom-right). Opens the full panel without leaving the tab.

How context is fetched

Frontend & Extension Picker

When running as a standard Chrome extension, Grip relies on content scripts injected directly into the tab's frontend environment.

  • Live DOM Interaction: The element picker (picker.ts) overlays a visual target canvas. Hovering and clicking targets elements directly via the browser's Pointer Events API.
  • Framework Detection: The frontend script inspects DOM nodes to find internal keys (such as React's __reactFiber$ or Vue's __vnode). This allows it to extract real-time component props, parent state, and original template details directly from the running app context.
  • Isolated Sandbox: Because it operates in the page context, it is fast and has zero overhead, but is restricted to elements present in the active DOM tree.

DevTools Panel & DOM Inspection

When running inside the Chrome DevTools panel, Grip benefits from elevated privileges through Chrome's DevTools Extension APIs.

  • Inspected Window Access: It utilizes chrome.devtools.inspectedWindow.eval() to run expression queries in the main frame, bridging DOM nodes directly to the DevTools console scope.
  • Source Maps & Exact Code: DevTools has access to active JS source maps loaded by the browser. When an element is selected, Grip can trace the compiled code back to the exact source file path, component class, and line number on your filesystem.

How it's built

Content scripts

  • picker.ts — overlay, multi-pick, inline comments
  • log-injector.ts — captures console.* early
  • floating-mount.ts — in-page floating UI

Background

background.ts handles messaging between tabs, pick history, and session storage.

DevTools

devtools/panel mounts the shared GripPanelView inside Chrome DevTools.

Connect MCP

To let AI tools control the same browser, set up grip-mcp and launch Chrome with debugging:

pnpm run build:mcp
./scripts/launch-chrome.sh 9222

Full setup for every IDE and CLI: MCP configuration.