painty/CSS-Used-ChromeExt — reverse-engineered prompt

Build me a Chrome DevTools extension called CSS Used.

I want to open DevTools, inspect any element on a page, then switch to a CSS Used panel and see only the CSS rules that are actually being used by that selected element and all of its children. If I select the body, it should show the used CSS for the whole page as it exists right now. The goal is to help strip out unused styles and keep just the CSS that matters for that part of the page.

I also want a Preview view so I can see that selected section rendered with the cleaned set of rules, kind of like a quick sanity check before I reuse the HTML and CSS elsewhere.

Please make it feel simple and reliable inside Chrome. It should work on normal pages, and if there are known limits like Chrome Web Store pages or local files needing permission, handle that gracefully and show a helpful message. Look up current Chrome extension docs if you need to.