The Mockup Compare Tool is a Chrome extension that allows designers and developers to easily compare design mockups with live websites. This tool provides an intuitive way to overlay design images on top of web pages, with features for adjusting position, scale, and opacity.
- Upload PNG, JPEG, or GIF images for comparison
- Paste images directly from clipboard
- Adjust overlay opacity and scale
- Move overlay using arrow keys or on-screen controls
- Click and drag functionality for easy positioning
- Overlay stays on top of page content while scrolling
- Clone this repository or download the ZIP file and extract it.
- Open Google Chrome and navigate to
chrome://extensions/ - Enable "Developer mode" in the top right corner.
- Click "Load unpacked" and select the directory containing the extension files.
- The Mockup Compare Tool should now appear in your Chrome toolbar.
- Click on the extension icon in the Chrome toolbar to open the popup.
- Upload an image file or paste an image from your clipboard.
- Click "Apply Overlay" to add the mockup to the current webpage.
- Use the opacity and scale sliders to adjust the overlay as needed.
- Move the overlay using arrow keys, on-screen buttons, or click and drag with your mouse.
- Click "Remove Overlay" when you're done comparing.
To modify or extend this extension:
- Make changes to the relevant files (manifest.json, popup.html, popup.js, content.js, content.css).
- Go to
chrome://extensions/in Chrome. - Click the "Reload" button for the Mockup Compare Tool.
- Test your changes.
Contributions to improve the Mockup Compare Tool are welcome! Please feel free to submit pull requests or create issues for bugs and feature requests.
This extension was collaboratively designed by an AI assistant and Matthew Stephens.