On Page Ruler

WHAT IT DOES

On Page Ruler provides a precise measurement tool that works directly on any webpage. Click anywhere to set a measurement start point, then drag to any other location to see the exact distance in pixels or millimeters. The tool displays horizontal and vertical guides that follow your cursor, making it easy to align measurements with page elements. The snap-to-element feature automatically attracts the ruler endpoint to the nearest element corner or edge, ensuring pixel-perfect accuracy. Real-time distance updates show the measurement as you drag, with special indicators for perfectly horizontal or vertical lines. The ruler also displays element dimensions when hovering, helping you quickly gauge the size of any page component.

WHERE IT RUNS

The extension runs entirely within your browser's local environment using the BotGentz framework. All measurement calculations, DOM traversal, and coordinate tracking occur on your machine without any network requests. No page content, measurement data, or user activity is ever transmitted, uploaded, or stored externally. The tool works on any website and respects the browser's security boundaries, operating within the isolated extension sandbox.

HOW TO USE

Click the extension toolbar icon to open the On Page Ruler panel. Click the "Start Measuring" button to activate the tool. Click anywhere on the page to set the starting point of your measurement. Drag your mouse to extend the ruler to the desired endpoint; a line and distance label follow your cursor in real time. Release the mouse to complete the measurement. The snap-to-element feature automatically locks the endpoint to the nearest element corner when you're within the snap threshold (adjustable from 0-100px). Toggle "Show guides" to display horizontal and vertical alignment lines. Change measurement units between pixels and millimeters using the dropdown selector. Customize the ruler color to suit your preference. Use the "Clear Ruler" button to remove all measurements and start fresh.

THE COORDINATE-BASED MEASUREMENT ENGINE — WHY IT WORKS

Traditional on-screen rulers often rely on CSS approximations or slow DOM recalculation, leading to inaccurate measurements and jittery behavior. This tool uses a different approach: it captures mouse coordinates directly from the browser's native event system at the pixel level, then calculates Euclidean distance using the Pythagorean theorem. The snap-to-element feature employs a spatial indexing technique that checks the distance from the cursor to every visible element's bounding rectangle corners in real time. By maintaining a persistent overlay layer positioned at the highest z-index possible, the ruler remains visible above all page content while still allowing mouse events to pass through. The measurement engine also detects straight-line measurements by checking the angle of the vector between start and end points, automatically displaying horizontal or vertical distances when the angle falls within a 5-degree tolerance. This approach delivers sub-pixel accuracy while maintaining smooth, responsive interaction.

THE PANEL

The On Page Ruler panel is fully draggable by its title bar and remembers its position on screen per website. It snaps to the edges of your browser window for clean alignment. Collapse the panel to a compact icon strip using the minimize button, restoring it with a single click. Resize the panel by dragging any edge or corner; the controls and measurement options adjust proportionally. Press the Escape key to cancel the active measurement and close the panel instantly. The panel maintains independent state for each browser tab, allowing you to measure elements in multiple tabs simultaneously.

PLEASE NOTE

This extension requires the free BotGentz extension framework to be installed and enabled. Websites continuously evolve their layouts and rendering techniques; while the measurement tool works across most modern sites, complex scenarios like CSS transforms, iframes, or shadow DOM may affect accuracy. All measurement data is stored locally in your browser's storage and is never transmitted, logged, or shared. The extension requests no network permissions and functions entirely offline. The source code is fully auditable and available for review.