How to use the Pixel Perfect Chrome Extension
Overview
Pixel Perfect by Workflow.design is a free Chrome extension that helps you achieve pixel-perfect accuracy when building websites. You'll overlay design mockups directly onto live websites in your browser, making it easy to compare your implementation against design specifications with precision alignment tools.
The extension works on any website (local or live) and stores your settings automatically, so you can return to your work exactly where you left off.
Prerequisites
Google Chrome browser installed on your computer
A design mockup image file (PNG, JPG, SVG, or other common formats)
Access to the website you want to compare (can be local or live)
Compatibility
Browser: Google Chrome only
Plan availability: Free for all users - no Workflow account required
Website support: Works on any HTTP or HTTPS website
The extension cannot be used on Chrome system pages (chrome://) or other extension pages (chrome-extension://).
Installing the extension
Open the Chrome Web Store page for Pixel Perfect.
Click Add to Chrome.
Review the permissions dialog and click Add extension to confirm.
The Pixel Perfect icon appears in your Chrome toolbar (top-right corner).
You'll see the Pixel Perfect icon in your browser toolbar - click it anytime to start overlaying designs on websites.
Permissions the extension requests
Pixel Perfect requests these permissions to function:
Storage - Saves your images and overlay positions locally in your browser
Active Tab - Accesses the current browser tab you're working on
Tabs - Identifies which tabs are open
Scripting - Injects the overlay onto web pages
Host permissions (all websites) - Allows overlays on any HTTP/HTTPS website
The extension operates entirely locally in your browser. No data is collected, tracked, or sent to external servers.
Using Pixel Perfect to overlay designs
Step 1: Open the extension
Navigate to the website you want to compare against your design.
Click the Pixel Perfect icon in your Chrome toolbar.
A 400px × 600px popup window opens, displaying the extension interface.
Step 2: Upload your design image
In the extension popup, click the image upload area.
Select your design mockup file from your device (PNG, JPG, SVG, etc.).
The image is saved to Chrome local storage and appears in the preview.
Export your design mockups from Figma, Adobe XD, Sketch, or any design tool as PNG or JPG files for best results.
Step 3: Configure overlay settings
Before inserting the overlay, adjust these settings:
Opacity control:
Drag the opacity slider to set transparency (0% = invisible, 100% = fully opaque)
Adjustable in 5% increments
Typical range: 40-60% for easy comparison
Height control:
Enter a pixel value to set overlay height (minimum 50px, maximum 1000px)
Width scales automatically to maintain aspect ratio
Match your design's intended viewport height
Step 4: Insert the overlay
Click the Insert button in the extension popup.
The overlay appears centered on your screen with fixed positioning.
A control panel appears in the top-right corner of the page.
Your overlay is now visible on the live website. You can immediately start comparing your implementation against the design.
Step 5: Position the overlay precisely
The control panel provides several ways to position your overlay:
Using control panel buttons:
▲ (Up) - Move overlay up by 1 pixel
▼ (Down) - Move overlay down by 1 pixel
◀ (Left) - Move overlay left by 1 pixel
▶ (Right) - Move overlay right by 1 pixel
⇄ (Move Panel) - Toggle control panel between right and left side
Using keyboard shortcuts:
Arrow keys - Move overlay by 1 pixel in any direction
Shift + Arrow keys - Move overlay by 10 pixels (for faster positioning)
Escape key - Remove the overlay instantly
Use arrow keys for micro-adjustments and Shift + arrows for quick positioning. The control panel displays "Shift = 10px" as a reminder.
Step 6: Fine-tune and compare
Adjust the overlay position until it aligns perfectly with your implementation.
Toggle opacity to compare details (lower opacity shows more of the live site).
Your position and settings are automatically saved to Chrome local storage.
Navigate away and return - the overlay persists with your saved settings.
Removing the overlay
When you're done comparing:
Click the ✕ (Remove) button in the control panel, or
Press the Escape key
To clear the saved image and start fresh, click the Clear button in the extension popup.
Troubleshooting
Symptom | Likely Cause | Resolution |
|---|---|---|
Cannot inject overlay / error message appears | You're on a Chrome system page (chrome:// or chrome-extension://) | Navigate to a regular website (e.g., localhost or any HTTP/HTTPS site) and try again |
No active tab found | Browser tab is not properly detected | Ensure you have a regular website tab active, then click the extension icon |
Overlay not visible after clicking Insert | Opacity is set to 0% or image failed to load | Increase the opacity slider above 0% or re-upload your design image |
Position not saved between sessions | Browser local storage is disabled or cleared | Check Chrome settings to ensure local storage is enabled; position should restore automatically |
Image appears stretched or distorted | Height value is incompatible with image aspect ratio | Adjust the height value - width scales automatically to maintain proper proportions |
Overlay doesn't scroll with the page | Expected behavior - overlay uses fixed positioning | This is intentional; reposition the overlay as you scroll to compare different page sections |
If you're comparing responsive designs, remember to resize your browser window to match your design's intended viewport size before inserting the overlay.
Limitations
Browser compatibility: Chrome only - not available for Firefox, Safari, Edge, or other browsers
Website restrictions: Cannot inject overlays into Chrome system pages or extension pages
Positioning: Overlay uses fixed positioning and does not scroll with page content
Overlay height: Maximum 1000px, minimum 50px
Image formats: Animated GIFs display as static images
Storage: Uses local browser storage - settings are not synced across devices
Superpower uses
1. Pre-launch QA and testing feedback
Use Pixel Perfect during quality assurance to catch design inconsistencies before launch. Overlay your approved designs on staging environments to verify spacing, typography, colors, and element alignment match specifications exactly. This helps QA teams provide precise, actionable feedback to developers.
Take screenshots with the overlay visible (at 50% opacity) to document discrepancies in bug reports or feedback tickets.
2. Coordinated live site reviews across teams
When multiple team members are reviewing a website, everyone can use the same design overlay with consistent settings. Share your opacity and height settings via Slack or email so the entire team reviews against identical specifications, ensuring feedback is aligned and accurate.
3. Client feedback on staging environments
Before presenting a staging site to clients, use Pixel Perfect to verify it matches the approved mockups. Then, during client presentations, you can demonstrate the pixel-perfect accuracy by toggling the overlay on and off - building confidence that the implementation is faithful to the design.
Combine this with Workflow's live website feedback feature to let clients add comments directly on the staging site.
4. Version comparison across multiple URLs
Compare the same design across different environments (development, staging, production) or A/B test variants. Upload your design once, then visit each URL and insert the overlay to identify inconsistencies between versions. Chrome's local storage remembers your settings per website automatically.
5. Responsive design validation with timestamps
During testing sessions, use Pixel Perfect to validate responsive breakpoints. Upload separate design overlays for mobile (375px), tablet (768px), and desktop (1440px) viewports. Resize your browser window and swap overlays to verify each breakpoint matches the design. Document your testing session with screenshots showing the date/time for audit trails.
Pro workflow: Create a folder of design exports named by viewport size (e.g., "Homepage-375px.png", "Homepage-768px.png") so you can quickly swap overlays as you test different breakpoints.
What's next
Learn how to add live websites to Workflow for contextual feedback
Explore feedback tools for collecting comments on live sites
Connect the Figma integration to sync design files directly to Workflow
Getting help
If you encounter issues with Pixel Perfect:
Check that you're not on a Chrome system page (chrome:// URLs)
Verify your image uploaded successfully in the extension popup
Try increasing opacity if the overlay isn't visible
Ensure Chrome local storage is enabled in your browser settings
For persistent issues, contact Workflow support with details about your browser version, the website URL, and any error messages displayed
The Pixel Perfect extension is maintained by Workflow.design. For extension-specific issues, include your Chrome version (chrome://version) when contacting support.