我正在编写一个 chrome 扩展程序,它需要遍历它注入(inject)的页面中的所有样式表并修改某些样式。
我像这样迭代/修改样式:
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>
我遇到的问题是似乎没有包含外部 CSS。
例如,如果我将我的扩展注入(inject)到 stackoverflow.com,它有:
<link rel="stylesheet" type="text/css" href="https://cdn.sstatic.net/Sites/stackoverflow/all.css?v=cfd0b49a38a7">
然后 all.css 中的样式不会被迭代。
如何迭代/修改外部样式?
注意 1 - 我试图手动获取这些链接 rel 并将它们放入内部样式标签中,但这会破坏这些文件中的任何相对 url(即 background-image: url('path/image.jpg')
)
注意 2 - 我的 list 有 "permissions": [ "http://*/*", "https://*/*"]
注意 3 - 因为这是一个 Chrome 扩展程序,所以我很高兴只有 Chrome 的解决方案
最佳答案
这可能是您的示例代码中的一个错误,但很明显,它不太可能在 DOMContentLoaded 事件 + 1 秒 之前注入(inject)和获取您的样式表。尝试将您的 setTimeout 等待更改为 20 秒,看看会发生什么。
如果这解决了您的问题,那么下一步就是创建一个更好的解决方案,等待您的样式表出现后再进行迭代。
关于javascript - 从 chrome 扩展更改外部 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47373308/