Browser Annotations

Browser Annotations is a Chrome DevTools extension to send feedback to your agent.

Select an element, add feedback, and send it to your pi or Claude Code session.

Install

Install the Chrome extension

npx browser-annotations@latest

Install the pi extension

pi install npm:@browser-annotations/pi

Install the Claude Code plugin

/plugin marketplace add wiebekaai/browser-annotations
/plugin install claude@browser-annotations

Usage

1. (Optional) Set up your agent to work on your feedback
   • pi — /browser-annotations
   • Claude Code — claude --dangerously-load-development-channels plugin:claude@browser-annotations
2. Select an element in the Chrome DevTools
3. Add your feedback in the Feedback tab (drag this tab to the left so it's easily accessible)
4. Use to batch annotations. Annotations persist per website, so your feedback can span multiple pages
5. Hit to send to your agent, or to copy as markdown

Tip

⌘ X / ⌘ ⇧ X copies your feedback to clipboard. Handy for quick sharing.

Features

• Annotate elements — Select an element with ⌘ ⌥ C and write your feedback
• Works anywhere — Annotate any website from your Chrome DevTools, no project setup required
• Live agent collaboration — Send feedback directly to your pi or Claude Code session via a webhook
• Copy as markdown — Copy feedback or an element’s full context as markdown at any point
• Full context — Includes an element's selector, position, size, viewport, device info, and a screenshot
• Source mapping — Links elements to React and Svelte source code during development
• Batch annotations — Annotate elements across multiple pages and send them as one prompt

Example output

# Feedback

Please refine the homepage

## 1. `div:nth-of-type(4) > h2.section-title`

Title should be 24px

![Screenshot](/tmp/browser-annotations/screenshot-1.png)

- **Page:** [http://localhost:5173/](http://localhost:5173/)
- **Device:** `Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/146.0.0.0 Safari/537.36`
- **Viewport:** 1497×879
- **Device pixel ratio:** 2
- **Position:** X 407, Y 206
- **Size:** 684×36
- **Source:** [`pages/index.tsx:42`](pages/index.tsx)

## 2. `p.docs-button > a[href="/packages"]`

This should open the sidepanel with packages

![Screenshot](/tmp/browser-annotations/screenshot-2.png)

- **Page:** [http://localhost:5173/](http://localhost:5173/)
- **Device:** `Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/146.0.0.0 Safari/537.36`
- **Viewport:** 1497×879
- **Device pixel ratio:** 2
- **Position:** X 407, Y 616
- **Size:** 159×48
- **Source:** [`components/DocsButton.tsx:8`](components/DocsButton.tsx)

Keyboard shortcuts

Action	Shortcut
Inspect element	⌘ ⌥ C
Add	⌘ Enter
Submit	⌘ ⇧ Enter
Copy current	⌘ X
Copy all	⌘ ⇧ X
Clear current	⌘ K
Clear all	⌘ ⇧ K
Cancel / Reset	Esc