SnapLayer

🎞️ 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. ## Features - 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 ## Usage 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