I Built a Zero-Dependency Browser Extension to Feed Context to AI Coding Agents

TL;DR: A Manifest V3 Chrome/Firefox extension that lets you click any DOM element and send structured context to Claude, Cursor, or any AI tool — no MCP server, no node_modules, no runtime dependencies.

---

The problem I kept hitting

I use Claude and Cursor daily. Half the time I'm asking them about a webpage — a UI bug, a component I want to replicate, a layout I need to understand. The workflow is always the same:

1. Open DevTools
2. Inspect the element
3. Copy the HTML
4. Copy the selector
5. Find the URL and title
6. Paste it all into the AI chat
7. Realize I forgot the surrounding context and go back

Seven steps to give an AI what it needs. I wanted one.

What I looked at first

There are existing tools for this:

• DOMLens — point-and-click capture for Cursor/Claude Code. Works well, but Chrome-only and opinionated about your AI tool.
• Element to LLM — cross-browser, structured JSON snapshots. Heavier than I needed.
• LoopIn, peek, Dokobot — all require running a local MCP server or SQLite database.

I didn't want to run a server. I didn't want npm install. I wanted a browser extension that copies rich context to my clipboard and lets me paste it wherever — Claude, Cursor, ChatGPT, a local Ollama setup, whatever.

The design constraints

I set a few hard rules before writing a line of code:

1. Zero dependencies. No package.json, no build framework, no bundler. The repo is the extension — Chrome can load it directly as unpacked.
2. Dual browser. Chrome and Firefox from one codebase, using Manifest V3 for both.
3. Clipboard-first. The default delivery is copy-paste. No server, no bridge, no middleware.
4. On-demand access. Only activeTab — the extension only sees a page when you click it.

How it works / The flow

1. You click the extension icon (or hit Alt+Shift+C)
2. An element picker overlay appears on the page
3. You hover to preview, click to capture
4. The extensions grabs the URL, title, selector, text, HTML, and optionally a cropped screenshot
5. It formats everything into a prompt
6. It goes to your clipboard (or into a local AI tab)

What gets captured

Quick capture gives the AI:

• Page URL and title
• CSS selector for the element
• Element text content
• Element HTML

Full capture adds:

• Surrounding HTML (grandparent element) for context

Bug report mode adds:

• Viewport dimensions, user agent
• Console errors and warnings captured during selection
• Computed style summary (layout, spacing, typography, colors)

Accessibility mode adds:

• ARIA role, labels, descriptions
• Focusability, disabled/hidden state
• Contrast estimate
• Semantic/landmark ancestors

You can also attach a cropped screenshot of the element with configurable format, compression, and padding.

Shadow DOM and iframes

The tricky part. Modern UI frameworks use Shadow DOM and iframes everywhere. The picker does recursive elementFromPoint through open shadow roots, so you can capture internal elements of web components. For iframes, it translates frame-local coordinates to top-level viewport coordinates for screenshot cropping.

Selectors for shadow-contained elements use a host >>> internal notation — human-readable, not a native CSS selector, but useful for AI agents to understand the component boundary.

Prompt templates

I added built-in templates for common tasks: describe a UI, summarize content, generate a Playwright test, extract data, audit accessibility, write implementation notes. You can edit them. The "no template" default just gives the raw context — useful when you want to write your own instructions.

What I learned

Manifest V3 is fine for simple extensions. The service worker model works well when your background logic is stateless message handling. The biggest friction was Firefox's partial MV3 support — some permissions behave differently.

Clipboard is underrated. The "just copy it" approach works with every AI tool. No integration, no API, no webhook. Paste into Claude, paste into Cursor, paste into a Slack message. The clipboard is the universal interface.

Dependency-free means reviewable. Every line of code is human-readable. No transpiled output, no bundled dependencies, no node_modules.

Element capture is harder than it looks. Shadow DOM traversal, iframe coordinate translation, selector uniqueness, screenshot cropping with DPI scaling — each has edge cases that compound.

What's next

• Redaction toggle (mask emails, tokens, passwords before copy)
• Preview/edit before send
• Markdown capture mode (cleaner than raw HTML for most AI tools)
• Character-based prompt size display

Try it

• Chrome: Chrome Web Store
• Firefox: Firefox Add-ons

It's free and has zero dependencies. If you use AI coding tools and frequently reference webpages, give it a shot and let me know what breaks.

---

Feedback and bug reports welcome.