Chrome扩展Manifest V3中Content Scripts的CSS文件不生效问题排查

你遇到的JS生效但CSS不生效的情况，大概率是以下几个原因之一，按顺序排查即可：

1. CSS优先级被页面原有样式覆盖 #

GitHub自身的页面样式对body元素有明确的背景色设置，且优先级可能高于你写的全局body选择器。可以尝试：

• 提高选择器优先级，比如使用更具体的选择器测试：

  html body {
    background-color: black !important;
  }
  

  （!important仅用于快速验证，后续建议用更精准的页面元素选择器替代，比如结合页面父容器的类名）
• 打开浏览器开发者工具（F12），选中body元素查看Styles面板：如果你的CSS规则被划掉，说明被页面样式覆盖；如果完全看不到你的规则，说明CSS文件未加载。

2. CSS文件路径错误 #

检查bg.css的实际位置是否与manifest.json处于同一目录。你的配置中css: ["bg.css"]表示该文件和manifest同级，若bg.css放在子文件夹（比如/css/bg.css），需修改路径为["css/bg.css"]。

3. 扩展未重新加载生效 #

修改静态资源或manifest后，Chrome可能缓存旧的扩展文件。需要：

• 打开Chrome扩展管理页面（chrome://extensions/）
• 找到你的newtset扩展，点击右上角的刷新按钮
• 重新打开GitHub页面测试

4. 匹配规则的细微问题 #

虽然JS已运行，但可以确认matches规则是否完全匹配当前页面URL。比如https://github.com/*能匹配所有带路径的GitHub页面，但如果访问的是特殊子域名（如gist.github.com）则不生效——不过你的情况JS已运行，这条大概率没问题。

内容的提问来源于stack exchange，提问作者Jagrit Sharma