Web Annotator

A lightweight bookmarklet for annotating web pages — click any element, type what needs to change, then export a structured changelist to paste into Claude Code (or any AI coding assistant).

No extensions to install. No accounts. Works in any browser.

Demo

Open webpage → Click bookmarklet → Click elements → Type notes → Copy to Claude Code

What it looks like:

• Hover over elements → red outline highlights them
• Click an element → input dialog appears with element info
• Each annotation gets a numbered red pin on the page
• Right-side panel tracks all your annotations
• One-click export copies a structured markdown + JSON changelist to clipboard

Install

Option A: Drag & Drop (Recommended)

1. Open install.html in your browser
2. Drag the blue "标注网页" button to your bookmarks bar
3. Done

Option B: Manual

1. Create a new bookmark in your browser
2. Set the name to Annotate (or whatever you like)
3. Paste the contents of bookmarklet.min.txt as the URL

Usage

1. Navigate to the page you want to annotate
2. Click the bookmarklet in your bookmarks bar
3. Click any element on the page — a dialog pops up showing the element's tag, CSS selector, and current text
4. Type what needs to change → press Enter to save (or Escape to cancel, Shift+Enter for newlines)
5. Repeat for all elements you want changed
6. Click "复制给 Claude" (Copy to Claude) in the top-right panel
7. Switch to Claude Code and Cmd+V / Ctrl+V — it gets a clean changelist with CSS selectors, current content, and your notes

Controls

Action	Effect
Click bookmarklet again	Pause / resume annotation mode
Enter	Save annotation
Escape	Cancel current annotation
Shift+Enter	Newline in note

Export Format

The exported clipboard content includes both human-readable markdown and machine-readable JSON:

## 网页修改清单

**页面**: https://example.com
**时间**: 3/9/2026, 10:30:00 AM
**共 2 处修改**

### #1
- **元素**: `header > h1.hero-title`
- **当前内容**: Welcome to Our App
- **修改要求**: Change to "Get Started Today"

### #2
- **元素**: `nav > a.nav-link:nth-of-type(3)`
- **当前内容**: About
- **修改要求**: Rename to "Our Story" and change color to blue

[
  {
    "index": 1,
    "selector": "header > h1.hero-title",
    "tag": "h1",
    "text": "Welcome to Our App",
    "note": "Change to \"Get Started Today\"",
    "url": "https://example.com",
    "timestamp": "2026-03-09T10:30:00.000Z"
  }
]

How It Works

• Pure JavaScript bookmarklet (~4KB), zero dependencies
• Injects minimal CSS for highlights, pins, dialog, and panel
• Uses document.addEventListener with capture phase to intercept clicks
• Generates CSS selectors from the DOM tree (tag + class + nth-of-type)
• Copies to clipboard via navigator.clipboard.writeText
• All state lives in memory — nothing is sent anywhere, no tracking

Files

File	Description
annotator.js	Source code (readable, with comments-friendly formatting)
install.html	Drag-and-drop install page

Browser Support

Tested on Chrome, Safari, Firefox, Edge. Requires navigator.clipboard API (all modern browsers).

License

MIT