Front-end development involves a lot of pixel-counting. Is this div 8px from the edge or 12px? Are these two columns actually aligned? I got tired of switching tabs to verify measurements, so I built a Chrome extension that answers those questions inline, without leaving the page.
Chrome Web Store: https://chromewebstore.google.com/detail/pixel-ruler-+-alignment-c/mlkckmpmigjabkmodhflghieipignmie
Website: https://atul0016.github.io/pixel-ruler-website/
What it does
Pixel Ruler + Alignment Checker overlays measurement and alignment tools directly on any webpage:
- On-screen ruler - drag to measure distances between any two points in pixels
- Alignment guides - horizontal and vertical lines you can place anywhere on the page
- Element measurement - click on a DOM element to see its dimensions and position
- Spacing check - verify the gap between two elements
- Persistent across scroll - guides stay fixed as you scroll
The goal was zero friction: open the extension, start measuring, close and nothing is left behind.
Architecture: Chrome MV3
The extension uses Chrome Manifest V3, now the required standard. MV3 has a stricter CSP than MV2 - service workers instead of background pages, and tighter permissions.
For a visual overlay tool, MV3 actually simplifies things. No background process is needed. The entire extension is a content script that injects a measurement overlay into the active tab.
The overlay approach
When activated, the extension injects a div overlay covering the full page viewport with pointer-events: none - except for the interactive ruler and guide handles. Clicks pass through to the underlying page, so you can interact with the site while rulers are visible.
The z-index value (2147483647) is the maximum 32-bit integer - the highest possible stacking context.
Ruler implementation
The ruler is a canvas element. When you click and drag, it calculates pixel distance using Euclidean distance, then renders the label at the midpoint.
Shift-key snapping to 45-degree angles was a small UX touch that speeds up horizontal and vertical measurements.
Guide lines
Guides are absolutely positioned elements within the overlay. Each has a drag handle. Drag to move, double-click to remove. Positions persist via chrome.storage.local within the same domain.
The CSP challenge
Strict CSP headers on some sites block injected inline styles. I solved this by injecting styles via chrome.scripting.insertCSS rather than inline, which satisfies most CSP configurations.
What I learned
DOM coordinate systems are confusing. getBoundingClientRect() gives viewport-relative coords. offsetLeft/offsetTop gives parent-relative coords. scrollX/scrollY gives scroll offset. Consistent measurements required being deliberate about coordinate space at every step.
Pixel density matters. On high-DPI displays, devicePixelRatio is 2+. Canvas without this compensation renders blurry. Multiply canvas dimensions by devicePixelRatio and scale the context.
Extension UX must be instant. Zero tolerance for perceived lag. The overlay activates in under 50ms - no async initialization on the critical path.
Publishing to the Chrome Web Store
MV3 review is usually 1-3 days. What helped:
- Minimal manifest.json - only request permissions you actually need
- Thorough privacy policy linked from the listing
- Screenshots showing the extension in actual use
- A one-paragraph description matching exactly what the extension does
Try it
If you do UI work, design reviews, or just want to verify your CSS is what you think it is:
https://chromewebstore.google.com/detail/pixel-ruler-+-alignment-c/mlkckmpmigjabkmodhflghieipignmie
Happy to answer questions about Chrome extension APIs, MV3 patterns, or content script architecture in the comments.
Top comments (0)