Pusher is a pixel-perfect design implementation tool that allows developers to overlay design mockups over live websites with an interactive draggable slider. Perfect for ensuring your implementation matches the original design exactly.
Download link:
- Navigate to your target website (localhost or any URL)
- Click the Pusher extension icon in your browser toolbar
- Select your design mockup using the file picker (bottom-right corner)
- Use the draggable slider to compare your implementation with the design
- Make adjustments to your code to achieve pixel-perfect matching
dist/
├── manifest.json
├── content.js
├── style.css
activeTab: Allows the extension to access the currently active tabscripting: Enables content script injection for overlay functionality
- Runs on
localhost/*for local development - Runs on
<all_urls>for testing on any website
- Extension not loading: Check console for manifest errors
- No permissions: Ensure you've granted necessary permissions
- Not working on HTTPS sites: Check mixed content settings
- Temporary extension disappeared: Reload in
about:debugging - Manifest v3 compatibility: Ensure Firefox version supports Manifest v3
- Content script not injecting: Check browser console for errors
- Slider not appearing: Check if content.js and style.css are properly loaded
- Images not loading: Verify CORS policies for external image URLs
- Performance issues: Check for JavaScript errors in browser console
- Chrome: Version 88+ (Manifest v3 support)
- Firefox: Version 109+ (Manifest v3 support)
- Edge: Version 88+ (Chromium-based)
This extension requires broad permissions to work on any website. Only install from trusted sources and review the code before installation.
Live life dance life! 🎨