Viewport Size Ruler Overlay

WHAT IT DOES

Viewport Size Ruler Overlay adds a professional ruler overlay to your browser, displaying rulers along the top and left edges of the viewport with precise tick marks and measurements. The overlay shows the current viewport width and height in pixels, and provides crosshair guide lines that follow your mouse cursor to measure distances between elements. The cursor position (X, Y coordinates relative to the viewport) is displayed in real-time. When you hover near an element's edge, the overlay snaps the cursor to that edge and displays the element's dimensions, making it easy to measure exact pixel distances. The ruler ticks are marked every 50 pixels, with labels every 100 pixels, and the entire overlay updates in real-time as you resize the viewport or move your mouse. A keyboard shortcut (Alt+R by default) lets you toggle the overlay on and off instantly.

WHERE IT RUNS

The extension works on every website, including complex single-page applications, traditional websites, and any page where you need to measure pixel distances or understand layout dimensions. It runs locally in your browser, drawing the overlay using Canvas API without modifying the page's underlying content. The extension supports all major browsers and adapts to both desktop and mobile viewports seamlessly.

HOW TO USE

After installation, click the "📐 Ruler" badge in the bottom-right corner of the page, or press Alt+R (customizable) to toggle the ruler overlay on and off. The overlay shows rulers along the top and left edges with tick marks every 50 pixels and labels every 100 pixels. Move your mouse to see crosshair guide lines and the current cursor coordinates displayed at the bottom of the screen. To measure an element, move the cursor near its edge—the overlay will snap to the edge and display the element's width and height. Use the "Show Rulers" and "Hide Rulers" buttons in the panel to control the overlay manually. To customize the experience, open the extension panel and adjust the ruler opacity (10% to 90%). Toggle "Show cursor coordinates" to show or hide the coordinate display. Toggle "Show guide lines" to enable or disable the crosshair guides. Toggle "Snap to element edges" to enable or disable edge snapping. Change the ruler color using the color picker. Set a custom keyboard shortcut for toggling the overlay.

THE ACTUAL MECHANISM — CANVAS-BASED RULER RENDERING WITH EVENT-DRIVEN REAL-TIME UPDATES

The extension uses a fixed-position overlay containing an HTML5 Canvas element that spans the entire viewport. The rulers are rendered using Canvas 2D drawing operations. The top ruler is drawn as a semi-transparent bar with tick marks calculated by iterating over the viewport width in 50px increments, with labels placed every 100px. The left ruler follows the same pattern along the viewport height. The crosshair guides are drawn as dashed lines that follow the cursor position, updated on every `mousemove` event. For element snapping, the extension uses `document.elementsFromPoint()` to detect the element under the cursor, then checks the element's bounding rectangle against a proximity threshold (8px). If the cursor is within the threshold of an edge, the cursor position is snapped to that edge and the element's dimensions are displayed in the info bar. The canvas is scaled for high-DPI displays using `devicePixelRatio` to ensure sharp rendering. All drawing operations are optimized to re-render only when necessary, using `requestAnimationFrame` for smooth updates. The overlay is positioned with `pointer-events: none` so you can interact with page elements while the rulers are visible.

THE PANEL

The settings panel is a lightweight, draggable overlay that appears in the center of your screen. You can reposition it by clicking and dragging the title bar; release it near the screen edge and it will snap into place automatically. To collapse the panel into a compact title bar, click the minimize button, expanding it again with the same control. The panel is fully responsive, adapting to different screen resolutions with a minimum width of 300px and a maximum of 480px. Press the Escape key at any time to dismiss the panel without applying changes. All controls—the enable/disable toggle, show/hide/toggle buttons, opacity slider, coordinates toggle, guides toggle, snap toggle, color picker, shortcut input, and per-site controls—are accessible within a clean, high-contrast interface that respects your system's color scheme.

PLEASE NOTE

This extension requires the free BotGentz companion extension to be installed and active, which provides the underlying DOM access and storage engine. The ruler overlay uses the Canvas API and is rendered on top of all page content with z-index 2147482000. The overlay is non-interactive (pointer-events: none) by design, allowing you to interact with page elements while the rulers are visible. The snap-to-element feature uses `elementsFromPoint()`, which may not detect all elements in complex SVG or canvas-based content. No personal data, browsing history, or page content is ever collected, stored, or transmitted. All settings are saved using the browser's storage API and remain solely on your device. The extension does not inject ads, trackers, or analytics of any kind.