marking-up-pages

Marking up pages

The user draws on the page and notes what is wrong; you get each mark tied to the real DOM element and, on dev builds, its component and source file. The marks are the bug report: read them before answering and don't ask the user to re-describe what they already marked.

Needs the Claude in Chrome tools (javascript_tool, computer, tabs_context_mcp). Load them in one ToolSearch call if they are deferred. The JavaScript tool runs in the page's own world and ignores the page's CSP, which is what makes this work.

1. Open the overlay

Use the user's tab (find it with tabs_context_mcp). Run the loader first; it is one line and costs nothing:

window.__scrawl ? (__scrawl.show(), __scrawl.status()) : (c => c && JSON.parse(c).version === '0.2.0' ? (0, eval)(JSON.parse(c).src) : 'NO_CACHE')(localStorage.getItem('page-scrawl:src'))

If it returns NO_CACHE, read scripts/overlay.js and pass the whole file as the text of javascript_tool. The overlay caches itself in that origin's localStorage, so after a reload the loader is enough. (Keep the version in the loader equal to VERSION in overlay.js.)

Then tell the user, briefly: draw on the page; after each mark a note box opens — type or dictate what's wrong, Enter saves; ⌥⇧S toggles drawing so they can click around in between; press Done and tell you when finished. Then stop and wait. Don't poll.

If the user opened it themselves with the bookmarklet, skip to step 2. If they instead paste copied marks or attach a *.scrawl.json file (the toolbar's Copy and Save buttons, for use without Claude in Chrome), read that: the file's summary field is the same text as summary(), and the rest is export({ points: true }). You can't screenshot or focus marks from a file, so lean on the selectors, text and source locations.

2. Read the marks

__scrawl.summary()

[page-scrawl · 3 marks · “Settings” · http://localhost:5173/settings · 1440×900 @2x]
- #1 underline over “setings” → `h1` “Notification setings” ‹SettingsForm› src/pages/Settings.tsx:23 — “typo: settings”
  style: font 22px/normal 700 Inter · color rgb(17, 17, 17) · display block · margin 14.7px 0px
- #2 arrow → `button[data-testid="save"]` “Save changes” ‹SaveButton › SettingsForm› src/components/SaveButton.tsx:14 — “hugs the divider”
- #3 circle over “Recieve email updates” → `div.row:nth-of-type(1) > label` ‹Toggle› src/components/Toggle.tsx:9
Failed requests since page load:
  · 404 fetch http://localhost:5173/api/prefs