AnthraCode_Selector

Select smarter. Prompt faster.

Quick Start · License

---

Quick Start

How It Works

AnthraCode_Selector runs as a local Chrome DevTools 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.

If you are installing from dist/AnthraCode_Selector-1.1.0.zip, extract the ZIP first, then use Load unpacked on the extracted folder.

Use The Extension

1. Open a React app in Chrome.
2. Press Alt+S, or open Chrome DevTools and select the AnthraCode_Selector panel.
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 DevTools 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
• Useful props and hook/state summaries when available
• Source location when React exposes debug source metadata
• Action hints for AI coding agents

Usage

Use The DevTools Panel

Open Chrome DevTools and select the AnthraCode_Selector panel. From there you can start element selection, refresh the current context, and copy the current selection again.

Use the Color menu in the panel to choose the selector highlight color: Green, Red, Yellow, White, or Black. Green is the default.

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>
role: button
source: src/components/hero-actions.tsx:42:7
owner: <HeroActions>
dom: main > section.hero > button.primary
props: variant="primary", size="large", onClick=ƒ handleStart()
action_hint: edit the file/line in `source` first; if source is unavailable, search the codebase for owner component and selected text.

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, props, state, 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.
storage	Retains React DevTools hook settings locally.
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 from the panel or shortcut, click an element, then retry copy.

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

This extension includes modified React Developer Tools runtime code derived from the React project, licensed under MIT by Meta Platforms, Inc. and affiliates. See LICENSE.md and THIRD_PARTY_NOTICES.md.

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.