A Chrome (Manifest V3) browser extension that overlays a design mockup image on top of a live webpage at a controllable opacity, so you can compare a rendered page against its design pixel-by-pixel.
Upload PNG/JPG/GIF mockups into a global image library, assign any of them as the active overlay for the current site, then drag, resize, and fade it to line up with the live layout. Overlay settings (image, position, size, opacity, visibility) persist per-hostname, so returning to a page restores your last alignment.
Requires Node.js.
npm install
npm run buildThen load the extension in Chrome:
- Go to
chrome://extensions - Enable Developer mode (top right)
- Click Load unpacked and select the
dist/folder
During development, run npm run watch instead of npm run build to rebuild on file changes, then click the reload icon on the extension's card in chrome://extensions after each change.
- Navigate to the page you're building.
- Click the Pixel Perfect toolbar icon to open the sidebar. It's docked to the edge of the page and stays open — across scrolling, dragging, and even navigating to other pages in the same tab — until you explicitly close it (click the toolbar icon again, or the sidebar's own close button). Click the minimize button to collapse it to a small handle, and click the handle to bring it back.
- Drag an image into the sidebar (or click Choose file) — it's added to your image library.
- Click a library image to assign it as the overlay for the current site.
- Adjust Opacity to blend it with the page, drag the image (or use arrow keys) to reposition it, and resize it with the corner handle or the width/height fields.
- Toggle visibility with the sidebar button or
Alt+Shift+Pto "blink" between the design and the live page.
If a mockup was exported at 2x/3x (e.g. a Retina screenshot or a Figma "@2x" export), set its Export scale in the sidebar so the overlay renders at the correct CSS-pixel size instead of twice as large as the page.
MIT — see LICENSE.