Meta Description: 完整教程，手把手教你用 Cursor AI 开发 Chrome 插件，从零开始，30 分钟完成自己的第一个作品。
Published: 2026-05-16
前言：为什么用 Cursor 开发插件？
[IMAGE_PLACEHOLDER: Cursor Chrome extension]
开发 Chrome 插件一直被认为需要专业的技术背景。但现在，有了 Cursor AI 的帮助，任何人都可以在 30 分钟内完成一个可用的 Chrome 插件。
本文将从头开始，手把手教你在没有任何编程基础的情况下，用 Cursor 开发一个”网页截图标注”的小插件。
你会学到什么？
- Chrome 插件的基本结构
- 如何用 Cursor AI 辅助编程
- 从需求到实现的完整流程
- 调试和发布的基本步骤
准备工作
- Chrome 浏览器
- Cursor AI 账号（免费版即可）
- 约 30 分钟的时间
第一部分：了解 Chrome 插件
什么是 Chrome 插件？
[IMAGE_PLACEHOLDER: Chrome extension basics]
Chrome 插件是一个小型程序，它可以增强浏览器的功能，比如：
- 拦截网页内容
- 添加自定义按钮
- 显示额外信息
- 自动化重复操作
插件的基本结构
每个 Chrome 插件都包含以下几个文件：
“`
my-extension/
├── manifest.json # 配置文件，定义插件的基本信息
├── popup.html # 点击插件图标时显示的界面
├── popup.js # 处理 popup 界面的逻辑
├── content.js # 在网页上运行的脚本
└── icon.png # 插件图标
“`
不用担心，这些文件我们会让 Cursor 帮我们生成。
第二部分：开始创建插件
步骤 1：创建项目文件夹
[IMAGE_PLACEHOLDER: Project folder]
- 在桌面（或其他方便的位置）创建一个新文件夹
- 命名为 `screenshot-annotator`（截图标注器）
- 记住这个文件夹的位置
步骤 2：打开 Cursor
[IMAGE_PLACEHOLDER: Open Cursor]
- 打开 Cursor IDE
- 点击 “Open Folder”
- 选择刚才创建的 `screenshot-annotator` 文件夹
现在你可以开始在 Cursor 里工作了。
第三部分：用 Cursor 生成代码
步骤 3：告诉 Cursor 你的需求
[IMAGE_PLACEHOLDER: Cursor prompt]
在 Cursor 的主界面（Cmd K 或输入框），输入以下内容：
“`
帮我创建一个 Chrome 插件，功能如下：
- 点击插件图标会打开一个小窗口
- 窗口里有一个”截图”按钮
- 点击截图按钮会截取当前网页的可见区域
- 截图后可以给图片添加文字标注
- 标注完成后可以下载图片
插件名称：Screenshot Annotator
作者：你自己的名字
“`
步骤 4：审查和修改代码
[IMAGE_PLACEHOLDER: Code review]
Cursor 会生成几个文件。让我来解释一下这些文件的作用：
manifest.json
这是插件的配置文件，定义了插件的名称、版本、权限等基本信息。
popup.html + popup.js
这是点击插件图标后显示的界面代码。
content.js
这是注入到网页中运行的脚本，可以操作网页内容。
步骤 5：理解生成的文件
[IMAGE_PLACEHOLDER: Understanding files]
让我简要解释每个文件的作用：
manifest.json
“`json
{
“manifest_version”: 3,
“name”: “Screenshot Annotator”,
“version”: “1.0”,
“description”: “截取网页并添加标注”,
“action”: {
“default_popup”: “popup.html”
},
“permissions”: [“activeTab”, “downloads”]
}
“`
这个文件告诉 Chrome：
- 插件的名称是”Screenshot Annotator”
- 使用 manifest V3 版本（新版本）
- 点击图标会打开 popup.html
- 需要访问当前标签页和下载功能
popup.html
包含插件界面的 HTML 代码，包括一个”截图”按钮和一个画布用于标注。
popup.js
包含处理截图和标注的 JavaScript 代码。
content.js
用于网页内通信的脚本。
第四部分：测试插件
步骤 6：加载插件到 Chrome
[IMAGE_PLACEHOLDER: Load extension]
- 打开 Chrome，访问 `chrome://extensions/`
- 右上角开启”开发者模式”
- 点击”加载已解压的扩展程序”
- 选择你的 `screenshot-annotator` 文件夹
如果一切正常，你应该能在扩展程序列表中看到你的插件，图标会显示在 Chrome 工具栏上。
步骤 7：测试功能
[IMAGE_PLACEHOLDER: Test extension]
- 打开任意一个网页（比如知乎）
- 点击插件图标
- 点击”截图”按钮
- 等待截图完成
- 在图片上添加文字标注
- 点击”下载”保存图片
如果一切正常，恭喜你！你的第一个 Chrome 插件已经可以使用了！
第五部分：进一步定制
增强功能
[IMAGE_PLACEHOLDER: Enhance features]
现在你已经完成了基础版本，接下来可以进一步增强功能。告诉 Cursor：
“`
帮我增强这个插件：
- 添加不同颜色的画笔
- 添加矩形和圆形工具
- 添加撤销和重做功能
- 添加马赛克工具
“`
Cursor 会帮你生成改进后的代码，你只需要重新加载插件即可。
个性化定制
[IMAGE_PLACEHOLDER: Customization]
如果你想修改插件的外观或行为：
- 修改 `popup.html` 中的样式
- 修改 `popup.js` 中的逻辑
- 询问 Cursor 任何你不理解的部分
Cursor 的好处是，你可以用自然语言和它交流，它会帮你理解和修改代码。
第六部分：发布插件
准备发布
[IMAGE_PLACEHOLDER: Publish extension]
当你完成了开发，想让更多人使用你的插件时：
- 完善 manifest.json：添加更详细的描述、图标、截图
- 创建商店图标：需要 128×128 和 512×512 的图标
- 编写使用说明：让用户知道如何安装和使用
- 注册开发者账号：Chrome Web Store 开发者账号需要 $5 注册费
发布步骤
- 访问 Chrome Web Store Developer Dashboard
- 支付 $5 注册费
- 打包你的插件（ZIP 格式）
- 上传并填写商店信息
- 等待 Google 审核（约 1-3 天）
常见问题
Q：生成的代码有问题怎么办？
[IMAGE_PLACEHOLDER: Troubleshooting]
A：首先不要慌，Cursor 生成的代码可能有一些小问题。常见的解决方法：
- 把具体的错误信息发给 Cursor，让它帮你修复
- 问 Cursor：”这段代码为什么会报错？”
- 使用 Chrome 的开发者工具查看具体错误
Q：如何学习更多关于 Chrome 插件的知识？
A：推荐以下资源：
- Chrome 官方文档：https://developer.chrome.com/docs/extensions/
- 在 Cursor 里问：”告诉我 manifest.json 每个字段的意思”
- 查看 GitHub 上的开源 Chrome 插件源码
Q：Cursor 免费版够用吗？
A：对于学习目的，免费版完全够用。它有足够的使用额度来创建小项目。
总结
你学到了什么？
[IMAGE_PLACEHOLDER: Summary]
通过这篇教程，你学会了：
- ✅ Chrome 插件的基本结构
- ✅ 如何用 Cursor AI 生成代码
- ✅ 如何测试和调试插件
- ✅ 如何发布插件到商店
下一步建议
- 尝试修改代码：不要害怕修改，Cursor 会帮你理解
- 创建自己的项目：把你想要的功能告诉 Cursor
- 学习 JavaScript 基础：推荐 MDN 的免费教程
- 加入社区：有很多 Chrome 插件开发者的社区可以加入
免责声明：本文是教程性质，Chrome Web Store 的具体政策和费用可能变化，请以官方最新信息为准。
