Screenshots

Description

A page ruler which can snaps around web elements for easier measurement. Provide convenience for front-end development and ui design **A smart web ruler with element snapping for easier frontend development and UI design.** ### ✨ Features - **Smart Snapping**: Hold `Alt` (or `Option` on Mac) while moving the cursor to automatically detect and snap to web elements. Supports snapping to **edges, 4 corners, and 4 edge midpoints**, displaying dimensions instantly. The snap preview uses a contrasting color to distinguish from measurement boxes. - **Easy Measurement**: Click and drag to create a measurement layer that snaps to element edges automatically. - **Flexible Editing**: Double-click any layer to enter edit mode: move, resize, or fine-tune. - **Arrow keys**: Nudge position by 1px (`Shift` for ×10, `Alt` + arrows to resize) - **Esc**: Exit edit mode - **Backspace**: Delete the selected layer - **Box-to-Box Snapping**: While drawing or dragging, boxes snap to the edges of other measurement boxes, making it easy to continue measuring from a previous boundary. - **Auto Restore**: Re-activating the extension after a page reload restores the measurements drawn on that page (within the browser session). - **Status Indicator**: The extension icon changes based on status (colored = active, gray = inactive) for easy identification. - **Shortcuts Help**: Hover over the `?` button in the toolbar to view all available shortcuts. - **Customization**: - **Individual Colors & Opacity**: Each measurement box can have its own color and opacity; editing when selected only affects the current item - **Global Mode**: When enabled, changing color or opacity affects all existing measurement boxes simultaneously - **Single Mode**: When enabled, only one measurement box can exist at a time; new boxes automatically clear old ones - **Size Position**: Configure where dimension labels appear (center, corners, etc.) - **Dashed Background**: Choose between solid or dashed background for measurement boxes - **Reference Lines**: Automatic horizontal and vertical reference lines with X, Y coordinate labels - **Crosshair Display**: Configure mouse crosshair display mode - **Quick Controls**: - Press `f` (configurable): Toggle toolbar visibility - Press `r` (configurable): Toggle reference lines - Press `s` (configurable): Toggle snap mode (when on, snapping is always active without holding Alt; Alt temporarily disables snapping) - Press `Shift`: Toggle dimension labels - `Ctrl+Z` / `Cmd+Z`: Undo (supports draw, delete, move, resize operations) - `Ctrl+Shift+Z` / `Cmd+Shift+Z`: Redo - `Alt + z` (customizable): Global shortcut to toggle the extension - Double-press `z` (configurable): Quickly activate/deactivate within the page (after first launch) - **Copy Dimensions**: Click the dimension label on any measurement box to copy its size to clipboard, with configurable format (`320 x 180` / CSS / with position / rem). - **Toolbar Hint**: A toast notification shows how to restore the toolbar after hiding it. - **Shadow Color**: The snap preview color is independently configurable, no longer derived from the measurement box color. - **Local File Support**: Enable "Allow access to file URLs" in `chrome://extensions` to measure local HTML files. - **Mobile Simulation**: Works in DevTools mobile simulation mode (ensure `device type` is set to `no touch`).