DEV Community

loading...
Cover image for Show DEV: I built a chrome extension to inspect element on hover

Show DEV: I built a chrome extension to inspect element on hover

Himanshu Mishra
Hi, My name is Himanshu and I'm an independent maker from India. Currently working on Hoverify- tryhoverify.com
・1 min read

Hi Devs,
My name is Himanshu Mishra, I'm an independent maker from India.
I recently launched a chrome extension that lets you inspect element on hover. It shows all the styles and HTML attributes in a sweet window which you can dock.
You can even live edit CSS, HTML attributes and content. It is jammed with nifty little features that make web design a smooth experience. You can know more about it here.

Hoverify demo

Development

I started working on it about 6 months ago, We don't do this but I decided on using vanilla javascript and jquery for it. Which gives me control over the final code and made build size significantly smaller (< 286KB).
I made a custom build system that takes every javascript file in the source folder and minifies it. I wrote a small tutorial on it. Check it out.
I even took this vanilla craze of mine to the landing page and rewrote it from React to simple HTML, CSS and javascript.

The extension is available for every chromium-based browser. Sadly, other browsers like Firefox and safari do not provide permissions like debugger and capture API which make some of the features possible. Although I may add support to these browsers but some of those features may suffer.

I would love to hear your feedback. Thank you!

Discussion (8)

Collapse
ben profile image
Ben Halpern

Really well done!!

Collapse
zicsus profile image
Himanshu Mishra Author

Thanks Ben! glad that you liked it.

Collapse
aisone profile image
Aaron Gong

looks decent will try it out

Collapse
zicsus profile image
Himanshu Mishra Author

Thanks Aaron!

Collapse
fifo profile image
Filipe Herculano • Edited

Looks a lot like getcssscan.com/
Nice job tho! ☺️

Collapse
zicsus profile image
Himanshu Mishra Author

Yes, but Hoverify is better πŸ˜…
Thanks!

Collapse
meatboy profile image
Meat Boy

Wow, seems to be very usefull. Good job!

Collapse
zicsus profile image
Himanshu Mishra Author

Thanks!