Chrome extension troubleshooting

by Dargon

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() .

Thanks!!

Dargon

posted to

Browser Extension Makers

on May 1, 2021

Say something nice to Dargon…

Post Comment

2

I'm reading your post to say "trying to get insertRule and deleteRule to work in content script and that sometimes you are being blocked". Seems like a specific issue and personally haven't dealt with this specific one (although I do used MutationObserver, so I have a ballpark idea). I will share some general tips.

Regarding #2, remember your content script executes in a separate context from the tab's original content. You can still hook into it (programmatically build a script), but it is hacky so I prefer not to go into it more. The point is you can if you really want to.

If you are trying to use a chrome API that is not accessible within tab, you can use message passing to call that API in background, and then message pass the result back to content to use it.

Without knowing the details of what you are building (how long you've been building, how many extensions, etc.) my general advice is try to make as few assumptions as possible about how some 3rd party web app works, because it is subject to change and not under your control. If you find a solution that works independent of the page's policies you will have a much easier time maintaining your extension.

neea

·
3 years ago
·
Reply
1. 1
  Awesome thanks for the reply, I appreciate the wisdom!
  
  Yeah it did feel like it's hacky to inject a script into the original context, especially since I think I will have CSP issues on some sites. I'll keep brainstorming for ideas that don't go in that direction.
  
  To clarify the hooking thing, what I was thinking of was the standard JS trick for hacking a function..
  
  for (let i=0; i < document.styleSheets.length; i++) { const sheet = document.styleSheets[i]; const orig = sheet.insertRule; sheet.insertRule = function(text, index) { console.log('the app called insertRule...') orig(text, index); } }
  
  Really just need to find out if/when the page calls insertRule.
  
  But from what I can tell, that trick just doesn't work from the content context. I guess it probably makes sense to block, because contexts could do a lot of crazy unsafe things with that.
  Dargon
  
  ·
  3 years ago
  ·
  Reply
  1. 2
    
    CSP isn't a concern when working with extensions. But as previous reply mentions, content scripts live in a separate context from rest of sites code and that means you cannot patch a function from the site you are injecting into -- the site gets its own copy and never calls your patched one.
    
    SO and chrome developers groups are your best places to ask really technical questions.
    
    Soft_Re
    
    ·
    3 years ago
    ·
    Reply