cssRules/rules 在 Chrome 中为空

Posted 2023-02-27

【中文标题】cssRules/rules 在 Chrome 中为空

【英文标题】：cssRules/rules are null in Chrome

【发布时间】：2011-08-06 09:20:12

【问题描述】：

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

为什么在这里应用跨域策略？无论如何，样式都在被应用，那么有什么意义呢？在我的情况下如何解决它？

编辑：

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

【问题讨论】：

对您添加的所有元素进行完整的 CSS 重置是否有帮助？也许这会有所帮助：***.com/questions/4966030/…

是的，我的想法是一样的。

您可以使用 !important 修饰符覆盖其他样式。

我也有同样的问题。当我遍历 cssRules 全局修改一些属性时，我意识到外部 css 的 cssRules 为 null，其中有最重要的规则

似乎是出于安全考虑。请参阅此处的讨论：bugs.chromium.org/p/chromium/issues/detail?id=143626#c11

【参考方案1】：

我通过将 URL 从 http:// 更改为 https:// 来解决我的问题版本。呵呵！

【参考方案2】：

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

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

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

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

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

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

【讨论】：

我已经更新了我的问题，表明定义我自己的 css 并没有多大帮助。

这似乎是不可能的，即使在样式表中添加 Access-Control-Allow-Origin 标头时，如果规则/cs-s-rules 来自不同的域，它也是空的。在大多数情况下可能无法接受的解决方法是通过 ajax 请求获取样式表的内容，并将响应附加到文档头中的样式标记。

虽然interesting answer here，在serg的第一个链接问题：The only real solution to this problem is to CORS load your CSS in the first place. By using a CORS xmlHTTPRequest to load the CSS from an external domain, and then injecting the responseText...