为什么我无法使用扩展内容脚本将 CSS 注入网页？

扩展内容脚本中的 CSS 注入问题

尽管在清单中定义了 CSS 注入，但您的 CSS 文件在网页中仍然不存在。以下是可能的原因和解决方案：

原因： CSS 规则冲突

样式表已注入，但由于其他样式覆盖其规则而未应用。

解决方案：

• 增加 CSS 特异性： 在 CSS 规则中添加更多特定选择器。
• 使用 " !important": 在每个规则后添加“!important”以覆盖现有样式。

原因： 内容脚本注入限制

清单版本 3限制内容脚本直接注入 CSS。

解决方案： 通过内容脚本注入 CSS，如下所示：

myScript.js:

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);

manifest.json:

"web_accessible_resources": ["myStyles.css"]

注意：使用 Manifest 版本 2 时，需要“web_accessible_resources”密钥才能允许访问来自非扩展页面的 CSS 文件。

以上是为什么我无法使用扩展内容脚本将 CSS 注入网页？的详细内容。更多信息请关注PHP中文网其他相关文章！