AnthraCode_Selector

Select smarter. Prompt faster.

Quick Start · License

---

Quick Start

How It Works

AnthraCode_Selector runs as a local Chrome extension. When you activate the selector, it injects a local inspection bridge into the current page, finds the React/DOM element you click, and copies a concise context block to your clipboard.

The copied context helps AnthraCode or another coding agent understand the exact UI element without you manually describing the page.

Install Locally In Chrome

1. Open chrome://extensions in Chrome.
2. Enable Developer mode.
3. Click Load unpacked.
4. Select this project folder, the folder that contains manifest.json.
5. Pin AnthraCode_Selector from the Chrome extensions menu if you want quick access.

Use The Extension

1. Open a React app in Chrome.
2. Press Alt+S.
3. Hover the page until the target element is highlighted.
4. Click the exact UI element you want your agent to understand.
5. Paste the copied context into AnthraCode or another coding agent.
6. Press Esc to cancel selection before clicking.

Preview

About

AnthraCode_Selector is a Chrome extension that lets developers select a React UI element and copy concise, AI-ready context for AnthraCode or other coding agents.

Instead of manually describing a button, card, form, or broken UI state, you can point at the exact element and paste a structured context block into your agent.

What It Captures

• Selected visible text
• DOM tag, path, id, and class names
• Accessibility metadata such as role and aria-label
• React owner/component hints when available
• Source location when React exposes debug source metadata

Usage

Use The Keyboard Command

Press Alt+S while the inspected tab is active. The selector overlay appears on the page. Hover to target an element, click to copy context, or press Esc to cancel.

Paste Into Your Agent

Paste the selected element context first, then give a concrete instruction.

Here is the selected element context. Fix the spacing bug in this CTA and keep the existing design system.

Example Context

SELECTED_ELEMENT
text: "Start free trial"
tag: button
component: HeroActions
source: src/components/hero-actions.tsx:42:7
dom: main > section.hero > button.primary
role: button

Only identifying fields are copied. Missing fields are omitted; component source and the DOM locator are used when React exposes them, with stable DOM identifiers as fallbacks.

Privacy

AnthraCode_Selector follows a local-first privacy model:

• Processing happens in the browser
• Page content is not sent to a remote server
• Source details and clipboard content are not uploaded
• Clipboard writes happen only after an explicit user action

See PRIVACY.md for the full privacy policy.

Permissions

Permission	Why it is needed
<all_urls>	Allows the selector to inspect React apps on sites you choose, including localhost, staging, and production pages.
scripting	Injects the local React inspection bridge.
tabs	Lets the Alt+S shortcut target the active tab.
clipboardWrite	Copies selected element context after an explicit user action.

Troubleshooting

Alt+S Does Not Start Selection

Reload the inspected page once after installing or reloading the extension. If Alt+S still does not start selection, another extension or browser shortcut may be using the same command. Open Chrome extension shortcuts and reassign the AnthraCode_Selector command.

React Owner Or Source Location Is Missing

Some production builds expose less React metadata. The copied context still includes DOM, text, role, accessibility details, and page location hints.

Clipboard Copy Fails

Clipboard writes require an explicit user action. Start selection with Alt+S, click an element, then retry copy if needed.

Design Language

AnthraCode_Selector uses Anthra's retro pixel interface language:

• Paper background
• Ink borders and text
• Orange accent
• Thick black borders
• Square corners
• Grid texture
• Offset block shadows
• Pixel-art logo and screenshots

Third-Party Code

The selector interoperates with React's browser-side fiber metadata; it does not ship the React Developer Tools runtime. See THIRD_PARTY_NOTICES.md for historical attribution.

License

AnthraCode_Selector original modifications are proprietary source-available: users may install, inspect, and use them internally, but may not sell, sublicense, redistribute, publish, host, or package them without written permission. Third-party React Developer Tools code remains under Meta's MIT License. See LICENSE.md.