Chrome 中的 cssRules/rules 为 null

Question

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

为什么这里应用跨域策略？无论其起源如何，样式都会被应用，那么有什么意义呢？就我而言，如何解决这个问题？

编辑：

我需要修改用户CSS规则（而不是简单地添加我自己的规则）的原因是我需要保护扩展注入的自定义元素免受*的影响规则。 查看此问题中的详细信息

Answer 1

与常规 JavaScript 相比，内容脚本不具有任何跨域权限，因此任何限制都会被保留。请参阅相关的问题#1、问题#2。

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

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

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

您还可以通过 JavaScript 调整具体元素样式：

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

Answer 2

我通过将 url 从 http:// 更改为 https:// 解决了我的问题版本。哎哟！