Claude Code 写 Chrome 扩展：按 Manifest V3 起步，加载未打包的扩展，改了哪些文件要重新加载

本文根据 Chrome 开发者官方文档《Hello World extension》《Manifest V3》和 Claude Code 官方《Best practices for Claude Code》整理，资料核对于 2026-11-05。配图为本站整理的示意图，不是界面截图。本站（bigolab.com）不是 Anthropic 或 Google 官方网站。

适用于谁

• 想做一个自己用的小插件（比如整理网页、改页面样式、加快捷按钮）的人；
• 会一点网页前端（HTML、JavaScript），想让 Claude Code 帮忙起步的人；
• 不知道扩展怎么在浏览器里试跑、改了代码要不要重装的人。

结论先说

1. 新扩展用 Manifest V3。 manifest.json 里 manifest_version 写 3；官方说明 V3 把后台页面改成按需运行的 service worker，并且不再允许使用远程托管的代码，扩展只能执行包内已有的 JavaScript。
2. 本地试跑不用打包。 官方步骤：地址栏输入 chrome://extensions，打开右上角的 Developer mode（开发者模式） 开关，点 Load unpacked（加载未打包的扩展程序），选扩展所在的文件夹。
3. 改完代码要不要刷新，取决于改了哪里。 官方表格：改 manifest、service worker 必须重新加载扩展；content script 要重新加载扩展并刷新网页；弹窗（popup）、选项页等其他扩展页面不用重新加载。
4. Claude Code 能写代码，但点浏览器扩展页面这一步要你自己做，它也看不到你的 Chrome 窗口。出错时把 chrome://extensions 里 Errors 按钮的内容和控制台报错贴给它。
5. 权限只申请需要的，这是本站建议，不是官方逐条规定。

图：本站根据 Chrome 官方：Hello World 扩展 整理的示意图

一个扩展最少需要什么

Chrome 官方的入门教程只用两个文件：manifest.json，描述扩展的能力和配置；以及一个弹窗页面 hello.html。官方的 manifest 示例包含 name、description、version、manifest_version: 3，以及 action 里的 default_popup 和 default_icon（工具栏图标和点击后显示的页面）。

json
{
  "name": "Hello Extensions",
  "description": "Base Level Extension",
  "version": "1.0",
  "manifest_version": 3,
  "action": {
    "default_popup": "hello.html",
    "default_icon": "hello_extensions.png"
  }
}

这是官方示例原文。让 Claude Code 写扩展时，先把它指向这个最小结构，再逐步加功能。

第一步：先说清楚想做什么，让它出方案

提示词 1：扩展方案，不写代码

text
我想做一个 Chrome 扩展：【在任意网页上，点击工具栏图标后，弹窗里显示这个页面的标题和字数，并能一键复制标题】。
请使用 Manifest V3。先不要写代码，给我方案：
1）需要哪些文件，各自做什么；
2）manifest.json 里要声明哪些权限，并逐项说明为什么需要；能不申请的就不要申请；
3）有没有用到远程托管的代码（不允许），所有脚本都放在扩展包内；
4）我怎么在 Chrome 里加载和测试。

要求它逐项解释权限，是为了避免「顺手多要一堆权限」。

第二步：生成并加载

提示词 2：生成最小可运行版本

text
请按方案在当前目录创建扩展，先做最小可运行版本：manifest.json、popup.html、popup.js，图标先用占位的 png 文件说明（告诉我需要放什么尺寸，不要生成二进制内容）。
所有脚本放在包内，不要引用任何 CDN 上的脚本。
写完后告诉我加载步骤，并列出我应当看到的结果。

然后你自己操作：

1. 在 Chrome 地址栏输入 chrome://extensions；
2. 打开 Developer mode；
3. 点 Load unpacked，选择扩展文件夹；
4. 官方说，默认扩展会收在工具栏的拼图图标里，可以把它固定到工具栏方便开发。

第三步：改代码以后，哪些要重新加载

官方的表格是这样的：

• manifest：需要重新加载扩展；
• service worker：需要重新加载扩展；
• content script：需要重新加载扩展，还要刷新目标网页；
• 弹窗、选项页、其他扩展页面：不需要。

重新加载的办法：在 chrome://extensions 页面点开关旁边的刷新图标。很多「改了没效果」就是漏了这一步。把这段规则告诉 Claude，也让它在每次改完后提醒你该怎么刷新。

第四步：看日志和报错

官方教程里的办法：要看弹窗的控制台，先打开弹窗，在弹窗上点右键选 Inspect（检查），进入 DevTools 的 Console（控制台） 面板。扩展代码出错时，chrome://extensions 里该扩展会出现一个 Errors 按钮，点开能看到报错。

提示词 3：把报错交给 Claude

text
扩展加载后，点击图标弹窗里没有显示字数。下面是我在弹窗上右键检查后，Console 里的完整报错：
【粘贴报错原文】
以及 chrome://extensions 里 Errors 按钮显示的内容：
【粘贴】
请先判断是 manifest 配置、权限还是代码逻辑的问题，说明依据，再给最小修改；改完告诉我需要重新加载扩展还是只需刷新页面。

官方「Fix bugs efficiently」工作流的第一步，就是把报错交给 Claude；最佳实践里也建议写清症状和复现办法，比说「不能用了」有效得多。

图：本站根据 Chrome 官方：Hello World 扩展 整理的示意图

功能要一个一个加

扩展出问题，往往是因为一次叠了太多东西：弹窗、后台、页面脚本、存储全写在一起，出错后不知道是哪一层。建议每一轮只让 Claude 加一个功能，加完立刻加载试一次，再继续。比如先让弹窗能显示标题，再加复制按钮，最后才加页面脚本。每轮都把「刚才我加载后看到了什么」告诉它，这比一次写完再调试省时间，也方便你用 git diff 看清每一轮改了什么。

第五步：权限和隐私自查

提示词 4：权限审查

text
请审查这个扩展的 manifest.json 和全部源码：
1）列出声明的每一个权限和可访问的网址范围，说明现在的功能是否真的需要，哪些可以去掉或缩小；
2）代码里有没有读取页面敏感内容（输入框、cookie、表单）、有没有把数据发到外部地址；
3）有没有引用远程脚本。
只给审查结果，不要修改文件。

扩展能读写你访问的网页，所以不要装来路不明的扩展，也不要把你自己写的未经审查的扩展发给别人用。要上架 Chrome 应用商店，请阅读官方的商店计划政策，本文不展开。

常见问题

Q：「Load unpacked」按钮看不到？

先确认右上角的 Developer mode 已打开，官方步骤里这是第二步。

Q：想让 Claude 直接看浏览器里的效果？

Claude Code 官方有 Chrome 集成（通过 Claude in Chrome 扩展），可以让它操作网页，设置见 /guides/claude-in-chrome。它是另一个功能，不等于它能管理你的扩展页面，请以官方说明为准。

Q：想做能联网请求别人 API 的扩展？

V3 不允许远程托管代码，但没有说不能发请求。具体要声明的权限请查官方 Permissions 页面。

订阅和额度

写一个小扩展通常会话不长。订阅选择见 /chongzhi/claude-code，价格和额度以官方页面当前显示为准。

相关教程

• /guides/claude-code-build-frontend-project-react-vue：从零搭前端项目
• /guides/claude-code-getting-started：Claude Code 入门
• /guides/claude-in-chrome：Claude in Chrome

参考资料

• Chrome 开发者：Hello World extension — https://developer.chrome.com/docs/extensions/get-started/tutorial/hello-world
• Chrome 开发者：Manifest V3 概览 — https://developer.chrome.com/docs/extensions/develop/migrate/what-is-mv3
• Claude Code 文档：Best practices for Claude Code — https://code.claude.com/docs/en/best-practices