Hi wonderful community,
I'm working on my first Chrome extension. Trying to figure out & understand some of the best strategies for dealing with tricky security related aspects...
For this extension what I really want to do is capture a live view of all the current page's CSS rules.
I started using MutationObserver which works great, however it only tells me about <style> blocks, it doesn't tell me when a site adds rules dynamically with CSSStyleSheet.insertRule()
I can hook into .insertRule and .deleteRule by writing my own fake wrapper functions, BUT when I do that from the extension content script, the top context just ignores those functions, like they don't exist. I guess it's some security mechanism, the extension context can't mess with the browser APIs for top context.
I can inject a script into the top context which then hooks .insertRule and .deleteRule (based on this post https://stackoverflow.com/questions/9515704/use-a-content-script-to-access-the-page-context-variables-and-functions ). But I guess this method will sometimes be blocked by the site's CSP settings? It seems like a lot of big sites have pretty strict CSP blocking these days.
Any brilliant ideas that I'm missing along the way?
Also I wasn't sure if Manifest V3 makes this kind of thing easier? I saw there are new APIs like scripting.executeScript() .