为什么我注入的 CSS 在我的内容脚本中不起作用？

排查内容脚本中的 CSS 注入问题

通过内容脚本将自定义 CSS 注入网页可能是扩展浏览器功能的有用技术。但是，如果注入的 CSS 不可见或不应用，则可能会令人沮丧。本文旨在解决此问题可能发生的原因并提供潜在的解决方案。

症状：

您已将内容脚本配置为注入 CSS 文件，但它确实如此不会出现在目标网页上。

可能原因：

1. 规则特异性： CSS 规则根据其特异性进行应用。如果网页上的其他样式覆盖了您注入的规则，您的CSS将不会被应用。
2. CSS应用：确保注入的CSS被正确解析和执行。 CSS 代码中的错误或与其他脚本的冲突可能会导致样式无法应用。

解决方案：

1.提高规则特异性：

向 CSS 规则添加额外的选择器或唯一的类名称以提高其特异性。这将确保它们覆盖网页上任何冲突的规则。

2.使用“!important”规则：

在 CSS 规则后添加“!important”将强制它们覆盖所有其他样式。但是，应谨慎使用，因为它可能会导致不良副作用。

3.通过内容脚本注入 CSS：

使用内容脚本动态注入 CSS，而不是在清单中声明它。这使您可以更好地控制何时以及如何应用样式。

var style = document.createElement('link');
style.rel = 'stylesheet';
style.type = 'text/css';
style.href = chrome.extension.getURL('myStyles.css');
(document.head||document.documentElement).appendChild(style);

4. Web 可访问资源：

在某些情况下，您可能需要在 manifest.json 中提供 web_accessible_resources 键，以允许在使用清单版本 2 时从非扩展页面访问 CSS 文件。

"web_accessible_resources": ["myStyles.css"]

通过实施这些解决方案，您可以使用内容脚本成功注入和应用 CSS，从而使您能够扩展网页的功能和外观：想要的。

以上是为什么我注入的 CSS 在我的内容脚本中不起作用？的详细内容。更多信息请关注PHP中文网其他相关文章！