Show HN: A DevTools-Level JavaScript API for DOM and CSS Style Rules
github.comIt is a wrapper around the Chrome DevTools Protocol (CDP), the same API that DevTools uses, to inspect elements programmatically and intuitively like accessing DOM.
Why this? I have seen too many tools pretending they can get matched CSS style rules but actually only computed styles. The real DevTools data — CSS rules, selectors, and cascading order — is what we want to retrive programmatically, yet CDP is hard to use, full of undocumented quirks. One have to observe Devtools' behavior and check the huge DevTools frontend codebase to know how to use it. Having worked on a Chromium fork before, I feel it is time to solve this once and for all.
What can we build around this? That's what I'd love to ask you all.
Probably like many, MCP was what came to my mind first, but then I wondered that given this simple API, maybe agents could just write scripts directly? Need opinions.
My own use case was CSS inlining. This library was actually split from my UI cloner project:
https://github.com/devtoolcss/devtoolcss
I was porting a WordPress + Elementor site and wanted to automate the CSS translation from unreadable stylesheets.
So, what do you think?
Any ideas, suggestions, or projects to build upon?
Would love to hear your thoughts — and feel free to share your own projects in the comments! Wow that's what I expected to see in Chrome DevTools MCP. How's their opinion? Yeah I am also thinking of contributing them. Though they tend to use DevTools Frontend, which is complete really a bulk of stuff and they probably still can't figuring out how to utilize its CSS parts. Will suggested to them after having more comments.