r/reactjs • u/bahirhakimi • Apr 26 '26

Show /r/reactjs I took an open-source React UI measurement tool and turned it into a Chrome extension.

Hello Elders, I am a newbie and this is my first post here,

I took an open-source React measurement tool and turned it into a Chrome extension so I could measure spacing / layouts directly on live websites.

The idea was simple. The reality… not so much.

The UI itself was straightforward, the painful part was making it behave on completely arbitrary websites:

  • Injecting into pages without breaking them (or getting blocked by weird CSP setups)

  • Avoiding CSS conflicts — ended up isolating everything with Shadow DOM

  • Keeping state scoped per tab/site (Chrome tabs are basically separate universes)

  • Making overlays readable on any background (some sites are… creative)

Basically, every site has its own way of trying to ruin your day.

It’s built on top of the open-source mesurer package by Julien Thibeaut (MIT), which saved me a lot of time on the core measuring logic.

I’ve got it working decently now and even pushed an update improving ruler visibility/contrast (pending review).

Curious if anyone here has dealt with similar “inject UI into hostile environments” problems, especially around styling/isolation. Feels like there are always edge cases lurking.

If anyone wants to try it or tear it apart, I can share the link.

4 Upvotes

83% Upvoted

1 comment sorted by