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

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

原因： CSS 规则冲突

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

解决方案：

• 增加CSS特异性： 向您的 CSS 规则添加更具体的选择器。
• 使用 "!important": 在每个规则后添加 "!important" 来覆盖现有样式。

原因：内容脚本注入限制

Manifest 版本 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 文件。