The problem
During QA and handoff, designers and front-end developers argue over pixels. The design file says one thing, the live page seems to say another, and nobody can point to a number that settles it.
Measuring a live page usually means opening DevTools and reading box-model values, or taking a screenshot and pulling it into a design tool to drag guides across it. Both work, but both take several steps for what should be a quick check, and the result is hard to share. A small mismatch in padding or alignment is easy to miss on a screenshot and easy to dispute in a review.
We wanted a tool that works where the problem is: on the live page, in the browser, with no export step in between.
Handoff reviews also involve people with different tools. A designer may work in a design app and a developer in an editor, so a shared, visible reference on the page itself saves a round of back-and-forth.
What we built
PixelRuler puts measurement on top of the live page, so you check a layout in place instead of copying it somewhere else.
- Rulers and guides drawn over any website, so alignment can be checked against a fixed reference
- Element dimensions and spacing shown without leaving the browser
- A workflow shaped for QA and design-to-development handoff, where both sides need the same numbers
This is the kind of tool that has to feel immediate. If measuring takes longer than guessing, people stop using it, so the design goal was to keep the steps between opening a page and reading a measurement as few as possible.
It is built as a Chrome extension on Manifest V3, using Chrome APIs to draw its overlay on top of the page without altering the site underneath. We also took care of the unglamorous parts: the store listing, the privacy policy and the submission to the Chrome Web Store. If you need something similar, see our Chrome extension development service.
We also thought about who uses it. A designer checking spacing and a developer checking the same page should see the same thing, so the overlay is meant to be readable at a glance and easy to switch off when the check is done.
The result
PixelRuler is live on the Chrome Web Store. It gives developers and designers a shared, exact reference for how a page is built, so a QA comment can say what the measurement is instead of what it looks like.
It is also a Medkon product, which means we have been through the full cycle ourselves: scoping, building, writing the privacy policy and getting through store review. That experience is what we bring to client extensions.
For a team, the practical gain is shorter QA threads: a comment can point at a measurement on the live page. If you have a repeated browser check in your own workflow, we can scope a tool for it on a discovery call.
Frequently asked questions
How do you build and publish a Chrome extension?
We scope the single job the extension should do, build it on Manifest V3 with the Chrome APIs it needs, test it across the browsers your users run, then prepare the store listing, screenshots and privacy policy and submit it. We handle the submission for you.
What is Manifest V3 and does it matter?
Manifest V3 is the current extension platform required by Chrome. It changes how background logic and permissions work. Building on it from day one avoids a forced rewrite later and keeps the extension eligible for the store.
How long does Chrome Web Store review take?
It varies, and it is controlled by Google rather than by us. Clear permissions, an honest description and a privacy policy help it go smoothly. We handle the submission and any follow-up questions from the reviewers.
How much does a custom Chrome extension cost?
Pricing is project-based. A fixed quote follows a free discovery call, once we know what the extension needs to do. A fix or plugin-sized job is usually 1-2 weeks, and a full store, app or platform is 4-8 weeks.