I am writing a chrome extension that needs to iterate over ALL stylesheets in the page it is injected into and modify certain styles.
I iterate/modify styles for example like this:
const iterate = (doc, f) => { for (const styleSheet of doc.styleSheets) { const rules = styleSheet.rules || styleSheet.cssRules; if (!rules) continue; for (const cssRule of rules) { if (!cssRule.style) continue; const selector = cssRule.selectorText, style = cssRule.style; if (!selector || !style.cssText) continue; f(style); } } } document.addEventListener("DOMContentLoaded", e => { setTimeout(() => { iterate(document, style => { if (style.getPropertyValue('background-color')) style.setProperty('background-color', 'yellow'); }); }, 1000); });div { background-color: red; }<div>hello</div>The problem I am having is that it seems that external css do not get included.
For example if I inject my extension into stackoverflow.com, which has:
<link rel="stylesheet" type="text/css" href="https://cdn.sstatic.net/Sites/stackoverflow/all.css?v=cfd0b49a38a7"> Then the styles from all.css are not iterated over.
How can I iterate/modifies external styles ?
Note 1 - I tried to manually fetch those links rel and put them into internal style tags but that breaks any relative urls in those files (i.e, background-image: url('path/image.jpg') )
Note 2 - my manifest has "permissions": [ "http://*/*", "https://*/*" ]
Note 3 - as this is for a Chrome extension I am happy with a Chrome only solution
1 Answers
Answers 1
This may be a mistake in your sample code, but it is apparent that it is unlikely to inject and fetch your stylesheet prior to the DOMContentLoaded event + 1 second. Try changing your setTimeout wait to 20 seconds and see what happens.
If this solves your problem then the next step is to create a better solution that waits until your stylesheet shows up before iterating.
0 comments:
Post a Comment