Metis
A Chrome and Firefox MV3 extension for designers and developers to inspect element dimensions and place alignment guides on any webpage.
Role
Solo Developer
Client
Personal Project
Year
2026
Industry
Developer Tools / Browser Extensions
Tech Stack
Overview
Designers and developers constantly need to verify spacing and alignment on live pages. Browser devtools work, but they're clumsy for quick measurements and don't offer persistent guide lines you can drop anywhere on the screen.
Metis is a browser extension for Chrome and Firefox MV3 with two complementary modes. Measure lets you hover or click to inspect the full box model, and Guides drops vertical or horizontal rulers that snap to element edges and centers with live gap labels. A shared overlay layer absorbs all pointer events so page scripts, ads, and iframes can't steal input.
What I did
- Built a Chrome and Firefox MV3 extension from a single shared codebase
- Designed an overlay pattern that prevents iframes and page scripts from hijacking pointer events
- Implemented Measure mode with hover highlights, multi-lock, and a live box model panel
- Implemented Guides mode with snap-to-element positioning and live gap measurement
Highlights
Cross-browser MV3: Chrome and Firefox from one source
Snap-to-element guides with real-time gap labels
Playwright end-to-end tested in CI
Like what you see?
Let's work together