unit-test Software License Release

🎞️ A Chrome extension that lets you overlay JPEG/PNG/SVG images on any webpage.
Perfect for designers comparing mockups, developers checking pixel-perfect implementations, or anyone who needs to visually compare images against web content. No more switching tabs — compare side by side in real time.

SnapLayer screenshot

• Drag & Drop Positioning - Move the overlay anywhere on the page
• 8-Direction Resizing - Resize from any corner or edge
• Aspect Ratio Lock - Maintain proportions while resizing (toggleable)
• Opacity Control - Adjust transparency for easy comparison
• Visibility Toggle - Quickly show/hide the overlay
• JPEG/PNG & SVG Support - Works with common image formats
• Style Isolation - Shadow DOM ensures no conflicts with host page styles
• Keyboard Shortcuts - Move with arrow keys; Shift+arrow for 10 px jumps; Backspace to delete
• Clipboard Paste - Paste images with Cmd/Ctrl+V, including SVG as plain text
• Fit to Viewport - Expand image to fill the viewport width and toggle back to original size
• Manual Size Input - Type exact pixel dimensions directly in the toolbar

• Chrome Web Store

1. Clone or download this repository
2. Build the extension:

   npm install
   npm run build

3. Open Chrome and navigate to chrome://extensions/
4. Enable Developer mode (toggle in top-right corner)
5. Click Load unpacked and select the dist/ folder

1. Click the SnapLayer extension icon in Chrome toolbar
2. Select a JPEG, PNG or SVG image file from your computer
3. The image appears as an overlay on the current page
4. Move: Drag the image to reposition
5. Resize: Drag the corner or edge handles
6. Adjust: Use the toolbar to change opacity, toggle visibility, or delete

The MIT Licence