Chrome中的cssRules / rules为null

Question

我的Chrome扩展程序需要修改用户页面上的某些css规则。通过document.styleSheets访问样式只能访问从同一域内链接的样式。 document.styleSheets数组的其他元素将cssRules/rules设置为null。

为什么跨域政策适用于此？无论它们的来源如何，都会使用样式，那么重点是什么？如何在我的情况下解决它？

修改：

我需要修改用户css规则（而不是简单地添加我自己的规则）的原因是我需要保护扩展注入的自定义元素不受*规则的影响。 see details in this question

Answer 1

与常规JavaScript相比，内容脚本没有任何跨域权限，因此任何限制都会被延续。请参阅相关的question #1，question #2。

您可以在清单中注入自己的css样式：

"content_scripts": [
    {
      "matches": ["http://www.google.com/*"],
      "css": ["mystyles.css"]
    }
]

您可以尝试通过定义更高specificity的规则来覆盖原始样式。

你也可以通过javascript {/ 3> tweak concrete element styles

document.getElementById("id").style.property="value";

Answer 2

我通过将网址从http：//更改为https：//来修复了我的问题版本。卫生署！