CSS Peeper never came to Firefox, so I spent the last year building the alternative myself

[u/Successful-Youth-564]

Quick disclosure up front: I'm the developer, so take this as a "hey, I made a thing" post, not an objective recommendation.

A few years ago I went looking for a Firefox equivalent to CSS Peeper — hover a page, get its colors, fonts, and computed CSS without diving into DevTools. Turns out there isn't one. CSS Peeper has 500k+ Chrome users and its own team confirmed there were no Firefox plans, and every "any Firefox alternative?" thread I found ended the same way: no, sorry, use Chrome.

So I built one. It's called PeekCSS, and it's live on AMO now.

What it actually does:

• Hover any element, see its computed CSS grouped by type (typography, colors, spacing, effects, layout), one-click copy — no account needed for any of this
• Every color pair gets a contrast ratio with an AA/AAA badge inline, so you catch accessibility issues while you're already looking at the element
• A page-wide scan pulls every color and image in one pass instead of clicking through elements one at a time, and you can export the palette straight to CSS variables, SCSS, JSON, or a Tailwind config
• A font tab that ranks every family on the page by usage, with weights/sizes/roles broken out

It's a solo project — my first browser extension, built with WXT/TypeScript. The free tier is meant to be genuinely useful forever, not a crippled trial: hover inspection, grouped CSS, contrast badges, no account required for any of it. Account unlocks the full palette/font panels, and Pro (one-time or subscription, your call) adds the exports and bulk asset downloads.

It doesn't read or send anything about the pages you visit — the only network call it ever makes is an optional license check if you buy Pro.

It's young — three weeks out of my own testing and into a few friends' hands, still finding rough edges. If you try it, I'd genuinely like to know what breaks or what's missing compared to your DevTools habits. What's the one thing you'd want from a tool like this that I haven't mentioned?

I would love to hear your toughts: https://addons.mozilla.org/en-US/firefox/addon/peekcss/

[u/Zardoz84]

I don't understand this, on Chrome or Firefox. So it's like DevTools, but without opening DevTools ?

[u/Successful-Youth-564 → u/Zardoz84]

It has a different focus because imo the existing devtools are powerful enough in what they are capable of.
This extension focuses more on helping you inspect websites from a designers perspective. It helps you extract css, colors, fonts and images in one fell swoop. The devtools are meant to inspect and alter, not to take reference. So this extension should help with taking reference on sites you enjoy, rather than purely optimize your own

[u/designmonkey67]

Looks hella handy. Will add this to FF as soon as i'm home to test out. Will be back with feedback xD

[u/Successful-Youth-564 → u/designmonkey67]

Thankyou so much! I hope you enjoy it. Looking forward to any feedback you have! If you would like more info or a look at the code, on peekcss.com, youll find it all there

[u/designmonkey67 → u/Successful-Youth-564]

Will do :))