Screenshots · Chrome extension & CLI
Take the screenshot. Or let your agent take it.
Frame a region of any browser tab — image or video. Annotate it. Destroy what must not leave. Nothing is uploaded, no account is created, and the extension asks for no permission on your sites.
The same annotation engine runs on the command line, addressed by CSS selector — so the agent that just built a screen can document it without ever seeing it.
Google Chrome for the extension, Node 20+ for the command line. Chrome shows no permission warning at install: the extension asks for nothing on your sites.
Who it is for
Step 1, step 2, gotcha.
Number the walkthrough on the screen itself, and the reader stops asking where to click. Frame what just broke, and nobody asks you to describe it.
Product owners
Numbered steps, arrows, a label landed in the nearest clear space. The same badges come out of a command, so the guide can be shot again after every release instead of ageing.
Testers
Frame it, circle it, blur the customer, paste it in the ticket. Ctrl+C copies the region without even opening the editor, and the frame stays put for the next shot.
What it produces
Every image below came out of the command below it.
Not mockups of the product — the product's output, on a demo app, made by the exact lines shown. Run them yourself and you get these files.
Every picture on this page was produced by an AI agent running Gotcha, the recording below included. None of them was retouched, and none of them was framed by hand.
gotcha shot --selector "#payments" --rect ".row-4" \
--text "Same card as the two refunds last week|.row-4 .pill" \
--blur ".customer-email"
One selector, five addresses gone. --blur destroys
the pixels — they are not in the file you send, not hidden under
a rectangle someone can lift.
gotcha shot --selector ".panel" \
--step ".field-amount .fld" \
--step ".field-customer .fld" \
--step ".btn-create"
Badges are numbered in the order you write the options — the order of the journey you are describing, not the order of the DOM.
An AI agent drove this — the extension loaded in a real browser, the pointer moved by a script it wrote. It masks the addresses, numbers the figures, frames the one that matters, and copies the result. What you are watching is the editor being used, not a file the editor produced.
Two doors, one engine
A mouse frames. An agent names.
A person drags a rectangle because they can see the screen. An agent cannot — but it knows the selectors, because it just read the HTML. Both end up in the same renderer, so both produce the same pixels.
You, with a mouse
Drag a frame. The bar underneath offers image and video as equals — it is the only moment you know whether the subject moves. Annotate, copy, paste into the ticket.
Delay the shot by 3, 5 or 10 seconds and the overlay hands the page back to you: open the dropdown, and the capture fires with it open.
Ctrl+C copies the region without opening the editor, Ctrl+A frames the whole screen, an eyedropper picks any colour — and it all works with a finger on a touch screen. Every screen, in the docs →
Your agent, with selectors
Every annotation target is a CSS selector — arrows, boxes, numbered
steps, blur. An arrow anchored on .save-btn survives a
redesign; 620,410 points at the button one day and at
the gap beside it the next.
A session keeps a real Chrome alive between commands, so the login, the scroll and the open menu survive. It can even load a Chrome extension and document it — the extension guide was shot that way, by Gotcha on Gotcha.
Why it is built this way
Four decisions you will feel.
No permission on your sites
The manifest declares no host permission at all — no
<all_urls>, no static content script. The overlay
is injected only after you press the shortcut, under
activeTab. Chrome therefore shows no “read and change
all your data” warning at install, and the extension costs nothing
on the pages where you never use it.
The blur destroys pixels
It is not a filter drawn over the image that a curious recipient can peel off. The pixels are gone from the file you send. One selector masks all forty matching rows of a table, not just the first — which is the case that actually leaks.
Recording controls sit outside the frame
Tab capture films the composited tab, so anything injected into the page ends up in the video — even fixed at the highest z-index. The stop and pause controls are therefore placed outside the recorded rectangle and cropped away by the export. They stay under your eyes and never enter the file.
It says “Save”, never “Download”
A word that suggests your screenshot full of customer data made a round trip through somebody’s server. It did not, and the button will not imply otherwise.
For agents
It just built the screen. Let it write the doc.
Give a coding agent a URL and a few selectors, and it produces the screenshots a release note or a support answer needs — framed, numbered, arrowed, and with the customer data destroyed before delivery.
# one browser, kept alive across the whole walkthrough gotcha open https://app.example.com/invoices --session doc gotcha shot --session doc --selector "#invoices" \ --step ".btn-new" --step ".field-amount" --step ".btn-save" \ --arrow ".btn-save" --text "Amount is tax-inclusive|.field-amount" \ --blur ".customer-email" \ --out doc/01-invoices.png gotcha close --session doc
--step numbers in the order you write the options — the
order of the journey you are describing, not the order of the DOM.
--text measures what is actually on the page and lands the
label in the nearest clear space, instead of dropping it on the field
caption it was meant to point at.
When a selector misses, the failure lists what the page really contains and what looks close. That is worth more than a stack trace to a reader with no screen.
Teach it to Claude Code
The package ships a skill. One symlink, and the agent knows the whole surface:
ln -s "$(npm root -g)/@saastisfaction/gotcha/skills/gotcha" ~/.claude/skills/gotcha
Then “document how to create a payment, with screenshots” is a complete brief. See a real run — the prompt, every command the agent typed, and the guide it wrote →
A CLI rather than an MCP server, deliberately. In MCP every screenshot is a round trip whose result crosses the context window again, and documenting one app takes forty. A shell command chains as many as it needs and reports one line back.
Pricing
Free where it should be.
Image capture, annotation and export are free and unlimited, and will stay that way. Only recording, heavy command-line use and screenshots behind a login are metered. One condition on every plan, free included: what you publish with the captures says Made with Gotcha, with a link here and to npm — see the terms.
Free
- Image capture, annotation, export — unlimited
- Full library, both languages
- 3 recordings per day
- 20 CLI captures per day
- No screenshots behind a login
- One feedback message a day
No account, no card, no expiry.
Pass
- Everything Pro unlocks, for a week
- No subscription, no device link
- For an agent: hand the key through its environment
For a burst of work, or for an agent that should not need a card on file. Machine payments — the agent paying by itself — come next.
Pro · monthly
- Everything, unlimited
- Unlimited recording
- Screenshots behind a login
- All the machines you use
- Unlimited feedback — bugs, missing selectors, wishes
- Cancel anytime
Billed each month. Cancel from the subscription page; the key works until the end of the month paid.
Pro · yearly
- Everything in Pro
- Less than $2 a month
- One invoice a year
- Cancel anytime
Billed once a year. Cancel from the subscription page; the key works until the end of the year paid.
Prices in US dollars, VAT added where it applies. Payment is hosted by Stripe; your card details never reach this site. The key is shown right after payment and sent to the address you paid with. Subscriptions are managed — card, invoices, cancellation — from the subscription page, with your key. A licence key is digital content supplied immediately — see the terms.