I am trying to use document.styleSheets[i].cssRules in the JavaScript console to read loaded CSS files of a tab. However, more often than not, I get the error: CSSStyleSheet.cssRules getter: Not allowed to access cross-origin stylesheet.
I figured out that cross-domain CSS rules can be only rendered, but not read with JavaScript, probably to prevent some kinds of XSS attacks. I tried to bypass this by using CORS Everywhere extension for Firefox, which I have already used for some cross-domain AJAX requests for data scraping from the JS console, where it worked fine. However, it didn't work for reading CSS rules. I also tried some similar extensions for Chrome, but I got similar error message, and extensions changed nothing about it.
Is there a way to make the browser give JS the read to the already loaded CSS rules in an already loaded tab?
If I just find URLs of stylesheets and try to read them with AJAX requests (which I can do), the server might respond with different files. I am interested in reading the already loaded CSS rules for the already loaded HTML in an already loaded tab.