devpanel 0.1.0

Chrome DevTools panel with terminal and browser context injection for Claude Code

devpanel

Chrome DevTools panel with an embedded terminal and browser context injection for Claude Code.

What it does

Opens a terminal inside Chrome DevTools. Claude Code runs in that terminal with a hook that automatically injects browser context into every prompt.

Pin elements — select in Elements panel, click Pin, $0 (selector + HTML + bounds) queues for the next prompt.

Capture network — snapshot requests from devtools.network.getHAR() into the queue.

Screenshot nodes — CDP Page.captureScreenshot with clip from DOM.getBoxModel, queued.

Everything drains on prompt submit. Claude Code sees the browser context without you describing it.

Architecture

DevTools panel (Svelte 5, xterm.js)
  ├── Terminal ──ws──→ PTY daemon (:random)
  ├── Pin $0 ──http──→ /stack (push)
  └── Capture ──http─→ /stack (push)

Claude Code (inside PTY)
  └── hook: curl /stack (drain + clear)

Three pieces, no coupling:

Component	Role
Extension	DevTools panel UI, pushes context to stack
PTY daemon	WebSocket terminal + /stack HTTP endpoint
Hook	claude wrapper drains stack into prompt

No relay, no auth, no content scripts. DevTools APIs (inspectedWindow.eval, network.getHAR, chrome.debugger) replace all of it.

Install

uv tool install devpanel
devpanel install   # registers native messaging host, prints extension path

Then load the extension in chrome://extensions → Load unpacked → point to the printed path.

Dev

# Extension (CRXJS + Svelte 5 + Tailwind)
cd extension-src
npm install && npm run dev

# Daemon
cd src/devpanel
uv run devpanel start

Build

make build
# 1. npm run build in extension-src/
# 2. copies dist/ → src/devpanel/extension/
# 3. uv build

Built extension is bundled as package data. uv tool install gives you the CLI, daemon, and extension files. One install.