document.styleSheets does not detect all stylesheets

Question

I am trying to detect (and then change) stylesheet in any loaded page.

I try the folowing code:

 // from https://developer.mozilla.org/en-US/docs/Web/API/StyleSheetList var allCSS = [].slice.call(document.styleSheets) .reduce(function (prev, styleSheet) { if (styleSheet.cssRules) { return prev + [].slice.call(styleSheet.cssRules) .reduce(function (prev, cssRule) { return prev + cssRule.cssText; }, ''); } else { return prev; } }, ''); console.log(allCSS); 

When I run this code on this page for example, I get a few stylesheets in the console.

However this is definitely not all the styles, it is infact just a small portion of it.

For example in the debugger I see that the page loads all.css from 'cdn.sstatic.net' with many styles, none of them are shown.

What am I doing wrong ? and how can I get ALL stylesheets ?

Thx!

Answer 1

CssRules

In some browsers, if a stylesheet is loaded from a different domain,
calling cssRules results in SecurityError.

• User agent (default) style sheets aren't visible in document.styleSheets

The CSSStyleSheet Interface (specs)

The cssRules attribute must follow these steps:

• If the origin-clean flag is unset, throw a SecurityError exception.
• Return a read-only, live CSSRuleList object representing the CSS rules.

Answer 2

如果需要获取和更改在document加载的.css文件，则可以请求在DevTools查看的文件，从document删除所有现有样式表，对响应文本进行调整，将调整后的文本作为.css附加到document或在<style>元素。