在开发 Chrome 插件时，很多同学都会遇到一个让人疑惑的问题：
“为什么扩展后台控制台（background）能看到日志，
但 content-script 的日志却完全没显示？是不是我代码没加载？”
其实这不是代码的问题，而是 Chrome 扩展机制本来就这样设计的。
本文教你彻底搞懂：
- background.js 和 content-script 的本质区别
- 为什么日志不会出现在同一个地方
- 应该在哪里调试不同脚本
- 常见错误 & 正确调试方式
看完你会彻底不懵。
🧱 一、Chrome 插件的三大脚本类型
Chrome 扩展程序常见有三种脚本类型，每一种都运行在不同的环境：
| 脚本类型 | 运行环境 | 哪里调试？ | 能看到什么？ |
|---|---|---|---|
| background.js（背景脚本） | 插件自己的独立进程（Service Worker） | chrome://extensions → Inspect service worker | 插件后台逻辑、事件、定时器、网络 |
| content-script.js（内容脚本） | 注入到网页内部运行 | 网页的 F12 → Console | DOM 操作、页面事件、hook、脚本注入 |
| popup.js / options.js | 插件弹窗或设置页 | Inspect Popup | UI 交互 |
理解这个结构后，你会发现：
👉 background.js 和 content-script.js 压根不是一个世界的东西
👉 所以日志不可能在同一个 Console 显示
这就是你第一次看不到 content-script 日志的根本原因。
🔥 二、为什么 background.js 能看到日志？
因为：
- 它运行在你的插件内部，是一个独立的“后台服务”
- Chrome 会在扩展页给它提供一个 专属的调试窗口
你现在看到的就是这个：
chrome://extensions/ → “检查 Service Worker”
在这里你能看到：
- 插件初始化日志
- 插件启动/更新事件
- API 访问
- chrome.runtime 消息通信
- storage 变化
- 定时任务
- 任何 background.js 的 console.log
但它永远看不到网页里的内容。
🌐 三、为什么 content-script 的日志看不到？
因为：
✔ content-script 不是插件内部的脚本
它属于网页环境，不属于扩展自身。
换句话说：
- background.js = 插件的后台
- content-script.js = 注入到网页里的脚本（等同于用户脚本）
因此：
👉 content-script 的 console.log 永远只会出现在网页自身的控制台里。
你必须打开它注入的网页，再按：
F12 → Console
才会看到内容。
如果注入的是淘宝：
- 打开淘宝
- F12
- 才能看到日志
如果注入的是你的小红书创作中心：
- 打开 creator.xiaohongshu.***
- F12
- 才能看到 logs
🕵️ 四、如何判断 content-script 是否成功加载？
打开它注入的网页，按 F12 → Sources，搜索文件：
contentscript.js
能找到就说明已经注入成功。
如果找不到原因可能是：
- manifest.json 的 matches 写错了
- URL 不符合匹配规则
- 页面 CSP（内容安全策略）阻止脚本执行
- 插件没重新加载
- 文件路径错误
🔧 五、正确的 content-script 调试方式（非常关键）
下面是你应该怎么调试 content-script：
✔ 1. 确保 manifest.json 配置正确
{
"content_scripts": [
{
"matches": ["https://www.xiaohongshu.***/*"],
"js": ["contentscript.js"]
}
]
}
✔ 2. 刷新插件
chrome://extensions → 重新加载
✔ 3. 打开你注入的网页
按 F12
✔ 4. 在 Console 里查看日志
这里才是 content-script 的真正 Console
✔ 5. 在 Sources 里确认是否注入成功
搜索你的 js 名称
⚠️ 六、常见误区（开发新手 90% 被坑）
❌ 误区 1：认为 background 和 content-script 是同一个 Console
不是。
❌ 误区 2：在扩展的 Debug 服务里找 content-script
找不到。
❌ 误区 3：在未匹配的 URL 打开网页期待 content-script 生效
例如 matches 是：
https://www.baidu.***/*
你打开淘宝永远不会生效。
❌ 误区 4：修改 content-script 不刷新插件
Chrome 不会自动热更新。
记住：
👉 background 修改要 reload
👉 content-script 修改也要 reload + 刷新页面
📌 七、总结一句话（最重要）
**background.js 显示在扩展后台的控制台
content-script.js 显示在网页自身的控制台**
它们永远不会在同一个调试窗口里出现。
