A powerful Chrome extension for comparing uploaded screenshots to live websites with difference highlighting and similarity scoring.
Compare design mockups, QA test cases, or any screenshot against a live website and instantly see pixel-level differences with a similarity score. Perfect for visual regression testing, design reviews, and QA workflows.
- 📸 Screenshot Upload: Upload any screenshot for comparison
- 🔍 Live Comparison: Compare against the current website in real-time
- 🎯 Difference Highlighting: Visual highlighting of differences in red
- 📊 Similarity Scoring: Precise percentage-based similarity scoring
- ⚙️ Adjustable Sensitivity: Fine-tune comparison sensitivity (1-10 scale)
- 🎨 Clean UI: Modern, intuitive interface with visual feedback
- Clone this repository:
git clone https://github.com/guntherb7/PerfectParallel.git - Open Chrome and navigate to
chrome://extensions/ - Enable "Developer mode" in the top-right corner
- Click "Load unpacked"
- Select the cloned
PerfectParallelfolder - The extension icon will appear in your Chrome toolbar
Since PerfectParallel isn't yet on the Chrome Web Store, follow the Quick Start steps above to load it as an unpacked extension.
- Fork and clone the repository
- Make your changes to the source files
- Test locally by reloading the extension in
chrome://extensions/ - Submit a pull request with your improvements
- Open the Extension: Click the PerfectParallel icon in your Chrome toolbar
- Upload Screenshot: Click "📁 Upload Screenshot" and select your reference image
- Navigate to Target Page: Go to the website you want to compare against
- Start Comparison: Click the "Compare" button
- View Results:
- The overlay will show three panels: your uploaded screenshot, current page, and highlighted differences
- Similarity score is displayed as a percentage
- Different pixels are highlighted in red
PerfectParallel uses an optimized pixel-by-pixel comparison algorithm:
- Capture: Takes a screenshot of the current webpage using Chrome's native capture API
- Normalize: Both images are scaled to matching dimensions while maintaining aspect ratios
- Sample: Uses intelligent sampling to balance accuracy with performance (scales down large images)
- Compare: Compares each pixel using RGB color difference calculations
- Threshold: Applies a sensitivity-based threshold to determine significant differences
- Visualize: Highlights differences in red and displays a similarity percentage
- Group: Nearby differences are automatically grouped into regions to reduce visual clutter
- 1-3: Very sensitive (detects minor differences)
- 4-6: Moderate sensitivity (balanced detection)
- 7-10: Less sensitive (only major differences)
| Browser | Support | Notes |
|---|---|---|
| Chrome | 88+ | Fully supported |
| Edge | 88+ | Should work (Chromium-based) |
| Brave | Latest | Should work (Chromium-based) |
| Safari | ❌ | Extension format not supported |
| Firefox | ❌ | Requires WebExtensions rewrite |
Note: Manifest V3 support is required. Chrome versions before 88 use Manifest V2.
- Viewport-based: Captures only the visible viewport, not the full page height (SVG rendering has limited support)
- Static content only: Works best with static content; dynamic or animated elements may cause comparison issues
- Same origin policy: May not compare against pages with strict Content Security Policy
- Large images: Very large images (>2000px) are automatically downsampled for performance
- Limited styling: Embedded stylesheets and scripts may not render correctly in the SVG fallback
Extension icon doesn't appear:
- Ensure you're in Chrome (not Edge or other browsers, though they may work)
- Verify the folder path contains all required files (manifest.json, popup.html, etc.)
- Try reloading the extension via the refresh icon on
chrome://extensions/
Comparison fails to start:
- Upload an image first (the Compare button is disabled until you do)
- Ensure the webpage has fully loaded
- Check if the site blocks screenshots (some banking/security sites do)
- Verify the page is accessible (not behind a login or paywall)
Comparison results are inaccurate:
- Try adjusting the sensitivity slider (1-3 for detailed differences, 7-10 for major changes only)
- Ensure both images show the same content area
- Check that your screenshot's viewport size matches the current page zoom level
- Refresh the page and try again
Performance is slow:
- Close other browser tabs to free up memory
- Disable other extensions temporarily
- Try comparing with smaller, simpler images first
- No Data Collection: The extension does not collect or transmit any user data
- Local Processing: All image comparisons happen locally in your browser
- No External Requests: No images are sent to external servers
- Temporary Storage: Screenshots are only stored temporarily during comparison
manifest.json- Extension configuration and permissionspopup.js/html- UI for uploading images and controlscontent.js- Core comparison logic and image processingcontent.css- Styling for highlights and overlaybackground.js- Service worker for tab capture.gitignore- Git configuration for clean commits
Contributions are welcome! Please follow these guidelines:
- Fork the repository
- Create a feature branch:
git checkout -b feature/your-feature - Make your changes and test thoroughly
- Commit with clear messages:
git commit -am 'Add: feature description' - Push to your fork:
git push origin feature/your-feature - Submit a Pull Request with a description of your changes
- Full-page screenshot capture (without SVG rendering issues)
- Support for comparing multiple screenshots
- Export comparison results as reports
- History of comparisons
- Better support for responsive designs
- Performance optimizations for very large images
- Chrome Web Store release
This project is licensed under the MIT License - see the LICENSE file for details.
Copyright © 2025 Guntherb7
- ✨ Initial release
- 🖼️ Screenshot upload and comparison
- 🎨 Real-time difference highlighting
- 📊 Similarity percentage scoring
- ⚙️ Adjustable sensitivity (1-10)
- 🎯 Difference region grouping for cleaner visualization
- 📦 Optimized performance with intelligent sampling
If you encounter any issues or have feature requests:
- Check the Troubleshooting section
- Search existing GitHub Issues
- Create a new issue with:
- Description of the problem
- Steps to reproduce
- Expected vs. actual behavior
- Browser version and OS