ookaoikcbhkdloldngmkfcjiibklhnme
Quality of Life updates, Fixed Controls Positioning. Added a color picker option, reset option and an improved icon Adds a ruler that can be used to line up specific items on your screen. Has a timer that allows you to change the distance moved as well as the time between moves NEW!! - Remembers the entered values across browser sessions - Added a color picker option - New Icon
The Reading Ruler
A ruler that overlays a webpage to help you read & retain information. Helpful for people who are neurodivergent. A common technique recommended for people who struggle to read and retain the information as they read is to use a ruler to read every line. This add-on creates a line across the webpage that follows the cursor and darkens the lower half to recreate this technique.
Better Ruler
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.** - **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. - **Esc**: Exit edit mode - **Backspace**: Delete the selected layer - **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 (e.g., `320 x 180`) to clipboard. - **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`).
Simple Ruler
A very simple ruler to check your webpage, without ads, without secrets, just a ruler. Check the measures of components can be easier than open the dev tools and check the size of a component. With the simple ruler extension, you just click and move your mouse over the components to see the width and height.
Metric Spy Page Ruler
Quickly Measure Elements on Web Pages with a Ruler Tool, Free Selection, and Convenient Keyboard Shortcuts. Attention web developers, designers, and marketers! Presenting Metric Spy: your solution for precise web page measurements. Simplify element gauging, ensure flexibility in measurement, and optimize workflow using convenient keyboard shortcuts. Elevate your design precision with Metric Spy, enhancing your web development process with ease. 📏 Ruler tool for precise measurements 🌐 Measure elements on web pages easily 🖱️ Free selection for flexible measuring ⌨️ Convenient keyboard shortcuts for quick access Enhance your web page analysis with Metric Spy! Quickly measure elements, ensure accurate pixel sizing, and simplify your workflow.
