For designers
Get the page as material you can edit, not a flat picture of it.
- Paste into Figma as real text, frames and images
- Colours, type scale, radii and shadows pulled off the live page
- Export tokens as Tailwind, CSS, SCSS or W3C JSON
Runs entirely on your machine
Capture the page.
Capture the page.
Walk away with the handoff.
OmniSnap takes a full-length screenshot of any web page, then hands you everything a designer or QA engineer actually needs from it: editable Figma layers, measured redlines, brand tokens, diagnostics, test selectors, and a defect ticket written on your own device.
No account No upload No telemetry Free
One capture. Three handoffs.
The same screenshot answers a different question depending on who opens it, so OmniSnap extracts all three at once rather than making you capture three times.
For QA
Everything a developer will ask for, attached before they ask.
- Web Vitals, failed requests and slow API calls
- Console errors, storage, connection and exact environment
- Numbered steps drawn on the shot become steps to reproduce
- Click the elements your tests use and get a ready page object
For product
A single image that carries its own evidence into any thread.
- Render the same page at mobile, tablet, desktop and wide
- Device frames and presentation canvases for decks
- Blur anything sensitive before it leaves your screen
Built for pages that fight back
Lazy loading, sticky headers, infinite feeds, app shells that scroll inside a panel rather than the window. These are the cases where every other capture tool produces a half-rendered mess.
True full-page capture
Scroll-stitched edge to edge at device resolution, including pages whose content scrolls inside a panel instead of the window. The sidebar stays in the shot.
Render at a breakpoint
Capture the page as it genuinely lays out at 375, 768, 1440 or 1920 px. Not your window resized, but the page re-rendered at that width.
Inspect & Redline
Spacing, radii, type and colour measured off the live DOM and drawn onto the screenshot, so the spec and the picture can never disagree.
Brand kit extraction
Every colour, font size, shadow and radius the page actually uses, with contrast audited and exporters for Tailwind, CSS, SCSS and design tokens.
QA diagnostics
Vitals, failed and slow requests, console errors, storage, connection and the exact environment, written up as a report you can paste into a ticket.
Test selectors
Click the controls your tests touch. Each one comes back with every selector that could reach it, ranked for how likely it is to survive a redeploy and checked so you know it matches one element and not three.
Annotation studio
Arrows, callouts, shapes, measured distances, adjustable blur and numbered step badges, plus device frames and presentation canvases.
Copy for Figma
Paste a web page as layers, not a picture
OmniSnap reads the page's real geometry: every text node, its box, its font size and its colour. It rebuilds all of it as a Figma scene, so what lands on your canvas is editable.
- Real text layers you can retype, restyle and search.
- Frames and fills positioned exactly where the browser put them.
- Wrapping preserved, so a headline that broke over two lines still does.
- Or export plain SVG for anything else that reads vectors.
/* Pulled from the live page, named on-device */
:root {
--brand-primary: #6366f1; /* Primary actions */
--surface-base: #0b0f17; /* App background */
--surface-raised: #1c2638; /* Cards and panels */
--state-success: #10b981; /* Confirmed saves */
--state-danger: #f43f5e; /* Destructive actions */
--text-primary: #e8edf7;
--text-muted: #9aa8c0;
--radius-card: 12px;
}
Selector collector
Stop pasting XPaths that break next sprint
Right-click, Copy XPath gives you an absolute path like
/html/body/div[3]/form/input[1], because DevTools has no opinion about
what the element is. It is unique, and it breaks the first time anyone adds a div
above it.
- Ranked by what survives, with test hooks and accessible names above CSS paths, which is the order Playwright recommends.
- Build artefacts spotted: a class like
css-1x2y3zor an id like:r7:is scored down, and the panel says why. - Checked against the page, so a selector that quietly matches three elements is caught now rather than in CI.
- Exported as a page object for Playwright, Selenium, Cypress or WebdriverIO. The right selector differs per framework, and so does the output.
It runs in a panel docked beside the page, so you can keep clicking elements while the list stays visible. No screenshot required.
// Checkout · generated by OmniSnap AI Studio
export class CheckoutPage {
get placeOrder() {
return page.getByTestId('place-order');
}
get emailAddress() {
return page.getByLabel('Email address');
}
// review: matches 3 elements
get cancel() {
return page.getByText('Cancel', { exact: true });
}
}# Checkout fails and the basket is emptied
**Severity** blocker
Pressing Place order returns a 500 from /api/orders.
The basket is cleared anyway and no error is shown.
## Steps to reproduce
1. Add any item to the basket
2. Press Place order at checkout
## Expected
The order is placed, or the basket survives the failure.
## Actual
The page returns to an empty basket with no message.
## Likely cause
/api/orders returns 500 and the handler clears the
basket before it checks the response.
On-device AI
The ticket writes itself. On your machine.
OmniSnap uses Chrome's built-in AI model, which runs on your own hardware. It reads the diagnostics it already collected and the steps you numbered on the screenshot, and writes the report you were about to type.
- Defect tickets with severity, steps, expected, actual and likely cause.
- Token names by role:
--brand-primary, never--teal-600. - Alt text for captions and accessibility notes.
- Questions answered from that capture's own evidence, with nothing invented.
No API key, no account, no request leaves the browser. Needs Chrome 138+ on a device that can hold the model; where it is unavailable the panel simply hides itself and everything else works as normal.
Privacy
There is no server to send anything to
This is not a policy decision we could quietly reverse. The extension has no backend. Every capture, measurement and draft happens inside your browser.
Nothing is uploaded
Captures are written to your browser's own storage. Only the most recent one is kept.
No analytics
No tracking, no crash reporting, no usage counters. The only requests it makes are back to the page you are capturing, for images and fonts to embed.
No account
Nothing to sign up for, so there is no profile to attach a capture to in the first place.
AI stays local too
The model runs on your hardware through Chrome's built-in API. Your captures are never prompts to a cloud service.
Every permission, and why
| Permission | What it is for |
|---|---|
| activeTab | Reads the tab you are on, only after you click the extension or press its shortcut. This is how the screenshot is taken. |
| scripting | Injects the capture controller on demand so the page can be measured and scrolled while it is photographed. Nothing runs automatically. |
| offscreen | A service worker has no canvas. The offscreen document stitches the captured tiles into one image and encodes exports. |
| storage | Remembers your preferences: format, quality, breakpoint and pacing. No page content is stored here. |
| downloads | Saves exported images, SVG, PDF and ZIP bundles to your Downloads folder when you click export. |
| clipboardWrite | Backs “Copy image”, “Copy SVG” and “Copy for Figma”. |
| debugger | Used only for Turbo capture, the Responsive Matrix and breakpoint rendering, which need Chrome APIs with no extension equivalent. Attached only while one runs, detached immediately after, and Chrome shows its own banner throughout. Captures work without it. |
| <all_urls> | Optional, off by default, never requested at install. Asked for only if you switch on console recording, which needs a listener in place before a page runs its first line. Switching it off hands the access back. |
Independently built
There is no paid tier
There are no running costs to recover: no server to keep up, no API bill to meter, no investor expecting a subscription. OmniSnap is built and maintained by one developer, in their own time.
If it saved you an afternoon of screenshotting, measuring and retyping, you can buy me a coffee. Completely optional: every feature stays free, and nothing in the extension changes either way.
Buy me a coffeeOpens buymeacoffee.com in a new tab. OmniSnap itself never asks for payment details, and this site still sets no cookies.
Questions
Is it really free?
Yes. There is no paid tier, no trial and no account. There is also nothing to upsell you, because there is no server running up a bill.
Why does it ask for the debugger permission?
Three features need Chrome DevTools Protocol commands that have no extension API equivalent: one-pass full-page capture, the Responsive Matrix, and rendering a page at a chosen breakpoint. The debugger is attached only while one of those runs and detached immediately afterwards, and Chrome displays its own banner the entire time. Ordinary captures work without it.
Where do my screenshots go?
Into your browser's own IndexedDB on your machine, so the Studio can reopen the capture you just took. Only the most recent capture is kept; taking a new one replaces it. Removing the extension removes them with it.
Does the AI send my page to a server?
No. It uses Chrome's built-in model, which runs on your own hardware. The extension holds no API key and contacts no AI provider, so your capture is never a prompt to a cloud service. If your Chrome or device cannot run the model, the feature hides itself and everything else continues to work.
Can it capture pages behind a login?
Yes. It captures whatever your browser is already showing, in your own session. Nothing about that page is transmitted anywhere.
What does it not do well?
Cross-origin iframes cannot be captured by any extension, so embedded third-party content may appear blank. Pages that stream content in forever have no natural end, so set a pace or capture a region. And console recording has to be switched on before a page loads, because console messages are events that nothing retains.
Take your first capture
Install it, open any page, and press Alt + Shift + S. The Studio opens with everything the page had to give.
Chrome 116 or newer. On-device AI features need Chrome 138+.