I am attempting to identify and then modify the stylesheet of any loaded page.
Here is the code I have been using:
// Source: 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);Upon executing this code on a particular page, only a subset of the stylesheets are displayed in the console.
However, this does not represent all of the styles; it actually captures just a fraction of them.
For instance, when inspecting the page, I notice that all.css from 'cdn.sstatic.net' is loaded with numerous styles, none of which are included.
What am I missing here? How can I access ALL available stylesheets?
Thank you!