PixelPrompt

Point at your UI. Describe the change. Let AI do the rest.

Editing frontend code with AI is powerful — but describing which part of the UI you want changed is surprisingly hard. You're stuck typing things like "the card in the second row" or "the button next to the search bar" into a prompt box that has zero visual context.

PixelPrompt fixes this. It's a Chrome extension that lets you visually select any region of your running application, write a prompt describing what you want changed, and copies a rich, structured context bundle — complete with the original source file paths and code — straight to your clipboard. Paste it into any AI assistant (ChatGPT, Claude, Copilot, Cursor, etc.) and get back a precise edit against the right files.

How It Works

• Click the PixelPrompt icon in your Chrome toolbar. The page dims and your cursor becomes a crosshair.
• Click and drag to draw a selection rectangle around the part of the UI you want to change.
• Write your prompt in the popover that appears (e.g. "Make this card's border thicker and add a hover shadow").
• Hit Copy. PixelPrompt resolves the selected elements back to their original source files, bundles everything into a Markdown document, and copies it to your clipboard.
• Paste into your AI tool of choice. The AI now has the exact source code, file paths, and your visual intent — no guesswork.

The copied bundle includes:

• Your prompt
• The resolved source file paths and their full contents
• An HTML snapshot of the selected region
• File and line count metadata

Features

• Visual region selector — click-and-drag to select any rectangular area of the page.
• Framework-aware source resolution — automatically detects React, Vue, Svelte, and Angular components and maps DOM elements back to their source files.
• Source map resolution — parses JavaScript source maps to trace bundled/transpiled code back to original source files, even in production builds.
• Vite dev mode support — in Vite dev environments, crawls the ESM module graph to discover component-to-file mappings and fetches raw source directly from the dev server.
• Structured Markdown output — copies a clean, AI-ready Markdown bundle with file sections, language-tagged code blocks, and the HTML snapshot.
• Multi-file context — if your selection spans multiple components, PixelPrompt resolves and includes all of them (up to 10 files / 2,000 lines).
• Works with any AI tool — the output is plain Markdown on your clipboard. Paste it into ChatGPT, Claude, Cursor, GitHub Copilot Chat, or anything else.

Installation

PixelPrompt is available on the Chrome Web Store.

• Visit the PixelPrompt listing on the Chrome Web Store.
• Click Add to Chrome.
• Pin the extension to your toolbar for quick access.

That's it — navigate to any locally running (or deployed) web application and start selecting.

How Source Map Resolution Works

Modern frontend toolchains (Vite, webpack, esbuild, etc.) transform and bundle your source files before serving them to the browser. The code running in the DOM bears little resemblance to what you actually wrote. PixelPrompt bridges this gap using multiple resolution strategies:

1. Framework component detection (Page Bridge)

PixelPrompt injects a small bridge script into the page's main world (not the isolated content-script world) so it can access framework internals that are invisible to regular extensions:

Framework	How it finds the component
React	Walks the fiber tree via __reactFiber$ to find the nearest component, reads _debugSource / __source for file info
Vue	Reads __vueParentComponent and extracts __file / component name
Svelte	Looks for __svelte context keys and constructor names
Angular	Inspects __ngContext__ for component constructors

This gives PixelPrompt a component name (e.g. Header) and, when available in dev mode, the exact source file path and line number.

2. Source map parsing

If the framework metadata doesn't include a file path, PixelPrompt falls back to source maps:

• Discovers <script> tags in the DOM and fetches each script's content.
• Extracts the //# sourceMappingURL= comment from the bottom of each script (supports both external URLs and inline data: URIs).
• Parses the source map — decodes the Base64-VLQ mappings to build a line/column → original-file lookup table entirely in the browser (no server needed).
• Matches component names to source file lists inside the parsed maps (e.g. component Header → src/components/Header/Header.tsx).

3. Vite dev mode module crawling

Vite serves each source file as a separate ES module in development. PixelPrompt detects Vite by looking for the @vite/client script tag, then:

• Finds the main entry module (e.g. /src/main.tsx).
• Recursively crawls the import graph, following import statements to discover every module in the app.
• Builds a component name → source file path map (e.g. App → src/App.tsx).
• Fetches original, un-transformed source code directly from the Vite dev server using the ?raw query parameter.

4. Fallback strategies

When none of the above yield a result, PixelPrompt tries heuristic matching:

• CSS Modules patterns — class names like Header_wrapper__a1b2c → component Header.
• Styled-components patterns — class names like sc-Header → component Header.
• Test ID attributes — data-testid, data-cy values matched against source map file lists.
• Direct data attributes — data-source-file, data-source-map-url + data-generated-line / data-generated-column for manual annotation.

The result: no matter how your app is built, PixelPrompt does its best to hand you the original source code and file paths — not transpiled bundle output.

Contributing

Contributions are welcome! Please open an issue or submit a pull request for any enhancements or bug fixes.

Development setup

• Clone the repository:

git clone <repository-url>
   cd ui-select-extension

• Install dependencies:

npm install

• Build the extension:

npm run build

This bundles everything into the dist/ directory using esbuild.

• Load the extension in Chrome:

• Navigate to chrome://extensions

• Enable Developer mode (toggle in the top-right)

• Click Load unpacked and select the dist/ folder

• For development with type-checking:

npm run watch

Then rebuild with npm run build after making changes and reload the extension in Chrome.

Running tests

npm test

Tests use Jest with jsdom and cover the core modules (overlay, popover, select mode, source map resolver, toast, utilities).

Project structure

src/
├── background/          # Service worker — handles extension lifecycle and messages
├── content/             # Content scripts — injected into web pages
│   ├── select-mode.ts   # Core selection logic (drag, lock, copy)
│   ├── overlay.ts       # Visual backdrop and selection box
│   ├── popover.ts       # Prompt input popover UI
│   ├── toast.ts         # Copy-confirmation toast
│   ├── page-bridge.ts   # MAIN-world script for framework introspection
│   └── sourcemap-resolver.ts  # Source map parsing and component resolution
├── popup/               # Extension popup (triggers select mode)
├── shared/              # Shared types and utilities
└── manifest.json        # Chrome extension manifest (MV3)

License

This project is licensed under the MIT License. See the LICENSE file for details.