cssRules/rules 在 Chrome 中为空

Question

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

为什么在这里应用跨域策略？样式无论如何都会被应用，而不管它们的来源，那么有什么意义呢？在我的案例中如何解决它？

编辑:

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

Answer 1

与常规 javascript 相比，内容脚本没有任何跨域权限，因此任何限制都被保留。见相关question #1 , question #2 .

您可以在 list 中注入(inject)您自己的 css 样式:

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

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

你也可以只tweak concrete element styles通过 javascript:

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