Gotcha

Get started

Two doors, one engine.

Gotcha frames a region of a browser tab, annotates it, and hands you a file. A person does it with the mouse, in a Chrome extension. An agent does it with CSS selectors, on the command line. Both end up in the same renderer, so both produce the same pixels — and nothing ever leaves the machine.

AltShiftD

You, with a mouse

Install the Chrome extension, press the shortcut on any page, drag a frame. Image or video is chosen next, in the bar under the frame. Annotate, copy, paste into the ticket.

Install and use the extension →

gotcha shot --selector "#invoices"

Your agent, with selectors

Install the CLI from npm, give Claude Code the skill, and the agent that just built a screen can document it — framed, numbered, arrowed, with customer data destroyed before delivery.

Install and use the command line →

The extension, in three steps

  1. Install it from the Chrome Web Store. Chrome shows no permission warning at install: the extension asks for nothing on your sites.

  2. Press Alt+Shift+D on any page (or click the icon), then drag a frame. Ctrl+A frames the whole visible screen.

  3. Choose Image or Video in the bar, or press Ctrl+C to copy the region right away. The editor opens with arrows, boxes, numbered steps, text and a blur that destroys pixels. Copy or Save — the image is already in your clipboard when the editor opens.

The command line, in three commands

# Node 20+ and Google Chrome on the machine
npm install -g @saastisfaction/gotcha

gotcha open https://app.example.com/invoices --session doc
gotcha shot --session doc --selector "#invoices" --step ".btn-new" --blur ".customer-email" --out doc/01.png
gotcha close --session doc

The session keeps a real Chrome alive between commands, so the login, the scroll position and the open menu survive. Every annotation target is a CSS selector — the thing an agent knows, because it just read the HTML.

To teach it to Claude Code, link the skill that ships in the package:

ln -s "$(npm root -g)/@saastisfaction/gotcha/skills/gotcha" ~/.claude/skills/gotcha

From then on, “document how to create an invoice, with screenshots” is a complete brief. See a real run, prompt and commands included →

What is free, what needs a licence

Image capture, annotation and export are free and unlimited, in the extension and on the command line, and will stay that way. Three things are metered: video recording, heavy command-line use, and screenshots behind a login.

FreeLicensed
Image, annotation, exportunlimitedunlimited
Video recording3 per dayunlimited
gotcha shot20 per dayunlimited
Screenshots behind a loginyes

One condition, free or licensed: whatever you publish with these captures says “Made with Gotcha”, with a link to this site and to the npm package. The line to paste →

A licence is a signed key, verified on your machine, offline. Pro is $3 a month or $20 a year, cancel anytime; a seven-day pass is $2. No account, either way. How to get a key and activate it, for a person or for an agent →

How these pages were made

Every screenshot in this documentation was produced by Gotcha — the extension photographed by its own command line, loaded into the session with gotcha open --extension. Under each image is the command that produced it. The worked example on the last page was written by a Claude Code agent using the skill, and is published as it came out.