The extension popup over a made-up demo page. All screens on this page use the same demo content.
The problem
As a UX designer, I rely on one specific screenshot feature: hovering over any element on a page and capturing exactly that. The extension I used for it started asking for a subscription after 20 screenshots, and I couldn't find an alternative that did element capture well without ads, tracking or a paywall.
The goal
A screenshot tool I'd want to use every day, free for everyone, that never sends data anywhere. A screenshot tool runs entirely on your own computer, so there is no server to pay for and little to justify a recurring fee.
The result
Five screenshot modes, four recording modes, a full markup editor, offline text recognition, and PNG, JPEG and PDF export. Free and open source under the MIT license, and submitted to the Chrome Web Store and Firefox Add-ons.
Principles
Private by architecture
The extension is technically blocked from contacting any server, so "no tracking" is a fact of the code, not a policy.
Minimum permissions
It only touches a page after you click the icon or press a shortcut.
One click to the thing you want
No accounts, no onboarding, no upsells.
Accessible by default
WCAG 2.1 AA as the baseline, not a polish step.
Six decisions
Decision 01 · Core interaction
Pick any element, like dev tools
I first shipped a "scrollable area" mode, but it only covered one case. I replaced it with an inspector-style picker: hover highlights any element with its tag and size, ↑ and ↓ walk to the parent or child, and click or Enter captures it. If the element scrolls on its own, like a chat or a table, its whole contents are captured.
Decision 02 · Modes
One switch, two modes
Screenshot and record started as separate features. I put them behind one switch and went through every option: Pick element and Selected area work in both, Full page is screenshot-only because a video only shows what's on screen, and Window and screen share one button because they share one browser dialog. The popup remembers the mode you used last.
Decision 03 · Crop
Crop with handles, not a redo
The first crop tool made you draw a new rectangle each time. I replaced it with a frame, eight handles, draggable edges, rule-of-thirds guides and Apply, Reset and Cancel. Re-entering crop shows the full original, so a crop can always be widened again.
Decision 04 · Markup
Markup people already know
I modelled the editor on the markup tools people already use on their phones, with the four shapes under one Shapes menu so the toolbar stays short. Blur uses the droplet icon from Photoshop and Illustrator, and it pixelates rather than soft-blurs, because pixelation is harder to reverse when you're hiding private details.
Decision 05 · Text
Select text inside a screenshot
Click the text tool, drag across any text in the image, then copy it or search it on Google. Recognition runs offline on your device, so the feature doesn't break the privacy principle.
Decision 06 · Privacy
Privacy you can verify
No ads, analytics or accounts. The extension's security policy blocks it from contacting any server. Screenshots are kept locally, only the five most recent, and can be cleared from the popup. Recordings stay in memory until you save them, and the code is public, so anyone can check all of this.
Five releases
I wrote the brief, worked with Claude Code as the engineer, reviewed every build in the browser and redirected it with design feedback. Each round became a version.
1.0
Full page, scrollable area, selected area and visible-area capture; annotation editor; PNG, JPEG and PDF export
1.1
Screen recording; first accessibility and visual-design review
1.2
Editor overhaul: crop handles, shapes and blur menus, markup tools, text recognition, auto-copy
1.3
Inspector-style element picker replaces "scrollable area"
1.4
Screenshot / Record video switch, with the capture options rationalised across both
Accessibility
An automated WCAG 2.1 AA scan (axe) reports 0 violations on the popup in light and dark, the editor and the recorder.
Named and announced
Every control has an accessible name, toggle states are announced, and status messages like "Copied" are read out by screen readers.
Visible and legible
Visible focus rings throughout, with contrast checked in light and dark mode.
Keyboard first
Capture modes, saving, copying, printing and text selection all work from the keyboard. The element picker can be driven entirely with arrow keys.
Known gaps
Drawing annotations still needs a mouse or touch. Not yet tested with a real screen reader.
What I learned
Constraints made it better
"Nothing leaves the device" ruled out cloud features, which kept the tool fast and simple.
Merging is design work
The biggest UX gain came from removing and combining options, not from adding them.
AI changes the designer's role
I wrote specs, reviewed real builds and made the calls; the agent wrote the code. Designing became mostly directing and judging.
Next: test and polish the Firefox version, make the drawing tools keyboard-accessible, and explore a Safari version for Mac, iPhone and iPad.