DeepSeek 浏览器扩展项目（Chrome 插件开发）

如果你已经会写点 JavaScript，也能看懂 Chrome 扩展的 manifest 文件，但真要动手做一个"能调用大模型、能读当前页面、能记住对话"的浏览器插件时，往往就卡在几个具体地方：Service Worker 里怎么发请求、跨域和 CSP 怎么绕、页面内容怎么安全地送进模型、流式输出怎么回填到侧边栏。这门课就是冲这些缺口去的，主题很明确——用 DeepSeek 的 API 做一个真正跑得起来的 Chrome 扩展。

先确认你缺的是哪一块

这门课不适合零基础。它默认你已经知道 Chrome 扩展大致由 manifest、background、content script、popup 几部分组成，也知道什么是 API Key、HTTP 请求和 JSON。真正需要补的，通常是三条线：

• 扩展侧：Manifest V3 下 Service Worker 的生命周期、消息传递、权限声明，这些和 V2 时代的写法差别不小，照着旧教程抄很容易踩坑。
• 模型侧：怎么把 DeepSeek 的对话接口接进来，流式响应怎么处理，历史上下文怎么组织成 messages 数组，Token 与截断怎么权衡。
• 产品侧：插件的入口放在 popup 还是侧边栏，怎么把当前标签页的正文抽出来当上下文，用户选中一段文字后如何一键提问。

对照一下，哪条线你最虚，学的时候就在那部分多停一停。

关键节点不在"写完"，在"接得通"

把大模型塞进浏览器插件，麻烦的从来不是 UI，而是几处衔接：

• 背景脚本里发起的请求，和页面上下文是隔离的，消息用 chrome.runtime.sendMessage 还是长连接 port，返回时机完全不同，写错就出现"点了没反应"。
• 流式返回要一边收 SSE 一边更新界面，如果直接在 popup 里做，弹窗一关连接就断；放到 Service Worker 又会遇到被回收的问题。这里的取舍是课程里最值得反复看的一段。
• 把网页正文喂给模型之前，得先去掉脚本、导航、广告节点，否则上下文又长又脏，回答质量反而下降。
• API Key 的存放位置直接关系到安全，硬编码在插件里等于公开，课程会讲清楚哪种做法在真实分发时不能用。

配套练习建议这样用

只看不写，这门课的价值会掉一半。建议按三层递进：

• 第一层，把示例扩展跑通，确认能在本地加载、能收到一次非流式的模型回复。这一步只求"打通"，不求好看。
• 第二层，自己改一处：换一个提问入口，或者把回答从纯文本改成带代码块高亮。改动越小越好，目的是熟悉消息流转。
• 第三层，做减法——把流式、上下文、页面抽取逐个关掉再打开，看哪一步崩了，你就知道自己真正没懂的是哪块。

章节笔记适合在两遍之间看：第一遍动手，第二遍对着笔记复盘那些当时"照着敲过去了但没想明白"的地方。

学完应该能回答这些问题

用来自测，答不上来就回去补：

• Manifest V3 里，为什么 background 页的全局变量不能像以前那样一直存在？这对保存对话历史意味着什么？
• 一次流式回答从 DeepSeek 返回，到出现在侧边栏上，中间经过了哪几个进程或上下文？
• 如果用户抱怨"插件打开了但一直转圈"，你会按什么顺序排查？
• 把整页文本塞进 prompt，和只塞用户选中的段落，各自适合什么场景？
• 这个插件的 API Key 如果换成让用户自己填，需要改动哪几处？

能把这些讲清楚，你手里就不只是一个跑通的 demo，而是一段能拿去面试里讲完整链路的经历。缺哪块补哪块，别在已经会的部分反复打转。