Chrome扩展Content Script语法正确却无法加载，求排查原因

问题详情 #

我制作了一个仅包含两个文件的Chrome测试扩展，但content.js始终无法加载：既不会出现在页面开发者工具中，也无法将页面文字改为红色。已尝试以下操作但均无效：

• 添加不同权限
• 修改匹配规则为特定站点
• 卸载重装扩展
• 重启Chrome
• 切换run_at至所有可选值
• 检查chrome://policy
• 添加debugger语句

主扩展的Content Script也存在同样的加载问题，但页面开发者工具中能看到Bitwarden的Content Script正常加载。

扩展代码 #

manifest.json

{
  "manifest_version": 3,
  "version": "1.0.0",
  "name": "Debug",
  "short_name": "Debug",
  "content_scripts": [
    {
      "matches": ["https://*/*"],
      "js": ["content.js"],
      "run_at": "document_end"
    }
  ]
}

content.js

document.addEventListener("DOMContentLoaded", () => {
  document.body.style.color = "red";
});

排查与解决建议 #

• 核对文件路径与命名：确认content.js与manifest.json在同一根目录下，文件名大小写完全一致（Chrome对文件名大小写敏感，Content.js和content.js会被判定为不同文件）。
• 简化content.js逻辑：由于run_at: document_end已经保证脚本在DOM加载完成后执行，无需再监听DOMContentLoaded事件——若DOM已加载完成，该事件不会再次触发，导致代码不执行。修改后的content.js：

  document.body.style.color = "red";
  

• 验证扩展状态：打开chrome://extensions/，确保测试扩展处于启用状态，且无报错提示。若有错误，点击"详情"中的"错误"查看具体原因。
• 测试特定匹配规则：将matches改为具体站点（如["https://www.google.com/*"]），避免通配符规则被浏览器安全策略限制，再打开对应页面测试。
• 禁用其他扩展：暂时关闭所有其他扩展，仅保留测试扩展，排除扩展间的冲突问题。
• 允许无痕模式运行：若在隐私模式下测试，需在扩展管理页面开启"允许在无痕模式下运行"选项。
• 查看服务工作者日志：打开扩展详情页的"服务工作者"（Manifest V3专属），检查是否有脚本加载失败的日志信息。

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