React Annotator for Claude (Chrome)

A Chrome browser extension for annotating React components on any webpage. Click elements to add comments, automatically detect React component names, and export annotations in a Claude-friendly markdown format.

Features

• Click to Annotate - Select any element on a React page and add comments
• React Component Detection - Automatically detects component names from React fiber
• Smart Path Suggestions - Suggests file paths based on component names (with uncertainty markers)
• Screenshot Capture - Captures element screenshots (stored locally in extension)
• Dark Theme UI - Clean, readable popup interface
• DevTools Integration - "Inspect" button to help locate components in React DevTools
• Claude-Friendly Export - Copy annotations as markdown with classes, HTML, and context
• Full Export - Download markdown file + all screenshots, with path auto-copied to clipboard

Installation

1. Open Chrome and go to chrome://extensions/
2. Enable Developer mode (toggle in top-right corner)
3. Click "Load unpacked"
4. Select the react-annotator-chrome folder

Usage

1. Enable annotation mode: Click the extension icon → "Start Annotating"
2. Click an element: A popup appears with auto-detected component info
3. Add your comment: Describe what you want to change
4. Save: The annotation is stored with a comment icon on the page
5. Export:
   • Click "Copy for Claude" to copy markdown to clipboard
   • Click "Export All" to download markdown + screenshots

Export Format

### 1. WaitlistSection
- **File (suggested):** `components/waitlist-section.tsx` ⚠️ *search for "WaitlistSection" to verify*
- **Classes:** `relative rounded-2xl border p-8 transition-all`
- **Comment:** Change the heading color to blue
- **Screenshot:** ![WaitlistSection](./1-waitlistsection.jpg)

<details>
<summary>Element HTML</summary>

```html
<div class="relative rounded-2xl border...">...</div>

```

How Component Detection Works

The extension injects a script into the page context to access React's internal fiber tree:

1. Finds __reactFiber$ keys on DOM elements
2. Traverses the fiber tree to find component names or keys
3. Skips library wrappers like motion.div, Suspense, etc.
4. Falls back to data attributes or PascalCase class names

Note: File paths are suggested based on kebab-case conversion. Marked with ⚠️ since actual paths require source maps.

Firefox Version

A Firefox version is also available at react-annotator-extension.

License

MIT