共计 2278 个字符，预计需要花费 6 分钟才能阅读完成。
很多人觉得写代码是很难的事情，但 2026 年有了 AI 编程助手后，不会写代码也能做出能用的软件。这篇文章教你怎么用 Cursor 和 Claude 配合，从零开始做一个实用的 Chrome 浏览器插件，全程不需要你写一行代码——只需要知道自己想要什么。
提炼
Chrome 插件是一种运行在浏览器里的小程序，可以增强浏览器功能。本文用 AI 编程的方法，带你 2 小时内完成一个真实的 Chrome 插件开发——从需求分析、界面设计到功能实现再到打包发布，全程用 Cursor 和 Claude 辅助，不需要任何编程基础。
一、准备工作：装好必要的工具
做之前需要先安装两个工具，花 10 分钟搞定：
第一步，下载 Cursor。Cursor 是一个 AI 驱动的代码编辑器，本质上是 VS Code + 深度集成的 AI。去 cursor.com 下载安装。安装完后打开，按 Ctrl+Shift+X（Mac 是 Cmd+Shift+X），搜索安装「Chinese Language Pack」把界面设成中文，方便操作。
第二步，注册 Claude 账号。Claude 在代码生成方面目前表现最好，特别是复杂逻辑的处理。去 claude.ai 注册一个账号。免费版够用，但如果要大量对话建议开个 Pro 版。
第三步，了解 Chrome 插件的基本概念。Chrome 插件主要包含 3 个核心文件：manifest.json（配置文件，告诉 Chrome 这个插件叫什么、有什么权限）、popup.html（点击插件图标后弹出的界面）、background.js（在后台运行的主题逻辑）。你不需要自己写这些，但知道它们的作用会帮助你更好地跟 AI 沟通需求。
二、用 Claude 规划插件需求
不要一上来就让 AI 写代码。先理清楚你想要的插件是什么：
打开 Claude，输入以下提示词：
我是一个零编程基础的新手。我想做一个 Chrome 插件，功能是：当用户在网页上选中文字时，右键菜单出现一个「用 AI 解释」的选项，点击后弹出一个浮窗，显示对这个选中文字的 AI 解释结果。请帮我：1. 写出完整功能需求文档 2. 列出需要哪些技术组件 3. 建议我用什么工具来实现 4. 给出一个从 0 到 1 的开发步骤计划 Claude 会帮你梳理出完整的开发路线图。根据它的建议，你可以决定是否修改或增加功能。比如你可能想加上翻译功能、或者支持快捷键呼出等——现在改比写到一半再改省事得多。
三、在 Cursor 中用 AI 逐步生成插件代码
需求确定后，开始在 Cursor 中写代码。打开 Cursor，创建一个新文件夹（比如 my-ai-plugin），用 Cursor 打开这个文件夹。
第一步，让 AI 生成项目的核心文件。 在 Cursor 中按 Ctrl+K（Mac 是 Cmd+K）打开 AI 对话面板，输入：请为我创建一个 Chrome 插件，功能是选中文字后右键菜单出现「用 AI 解释」选项。请生成 manifest.json（Manifest V3）、popup.html、popup.js、content.js、background.js。注意 manifest.json 中需要声明 contextMenus、activeTab、storage 权限。content.js 中的浮窗要支持拖动和关闭。
Cursor 会为你生成所有文件。你可能需要对每个文件单独按 Ctrl+ K 来优化。如果哪个文件不满意，直接告诉 AI 改就行——比如「浮窗样式太丑了，改成圆角 + 毛玻璃效果」。
第二步，对接 AI API。 插件要真正调用 AI 来解释文字，需要接入一个 AI API。最简单的方案是用 DeepSeek 的免费 API。在 manifest.json 中增加 api 权限，在 background.js 中写调用 API 的逻辑。如果你担心 API 调用需要付费，也可以用本地 Ollama 的方案，在 content.js 中把请求地址指向本地端点。
第三步，调试和测试。 在 Chrome 地址栏输入 chrome://extensions/，打开右上角的开发者模式，点击加载已解压的扩展程序，选择你的插件文件夹。右键点击任意网页中选中的文字，应该能看到「用 AI 解释」的菜单选项。如果出现问题，把错误信息复制给 Claude，让它帮你分析解决。
四、测试和调试的实用技巧
技巧一：善用 Chrome 开发者工具。 右键点击插件弹出窗，选择审查弹出内容可以查看 popup.html 的调试信息。在 background.js 上右键选择检查视图可以查看后台脚本的控制台输出。
技巧二：把错误信息直接喂给 AI。 如果遇到报错，把完整的错误堆栈复制给 Claude，AI 通常能准确指出问题所在。
技巧三：版本控制防后悔。 虽然菜鸟不需要学 Git，但还是建议每个大功能改完前备份一下整个文件夹。
五、打包和发布
插件功能全部调试通过后就可以打包发布了。
打包： 在 Chrome 扩展管理页面点击打包扩展程序，选择你的插件文件夹，会生成一个.crx 文件和一个.pem 文件（私钥，保存好别丢了，以后更新要用）。
发布到 Chrome 应用商店： 如果想公开发布，需要注册 Chrome Web Store 开发者账号（一次性费用 5 美元）、在开发者控制台上传插件、准备应用商店的素材（128×128 图标、截图、详细描述）、等待审核（通常 1~3 个工作日）。
总结：2026 年用 AI 编程最大的变化是——编程的门槛从「会不会写代码」变成了「会不会表达需求」。你不需要知道 JavaScript 的语法，不需要理解 Chrome 的 API，只需要清楚地告诉 AI 你想要什么、出了什么问题。一个好的提示词比三年代码经验更有价值。从今天开始，试着用这个流程做一个小工具，你会发现「自己做个软件」这件事比想象中简单太多了。
