【Cursor实战】AI 赋能 Chrome 插件开发：从零打造豆包图片去水印插件

前言

 📫 大家好，我是陈三心，热爱技术和分享，欢迎大家交流，一起学习进步！

 🍅 个人主页：陈三心

AI 编程工具

目前，人工智能（AI）正以前所未有的速度渗透到各个领域，编程领域也不例外。它们凭借强大的智能算法，为开发者们带来了全新的编程体验，极大地提升了开发效率。目前主流的AI 编程工具有很多，比如：

• github 的 copilot
• 字节豆包的 marscode
• 阿里的 通义灵码

不过，目前最被大家推荐的当属 Cursor 了。Cursor 凭借其独特的优势，在众多工具中脱颖而出。

Cursor 简介

Cursor 作为一款 AI 编程IDE，真正做到了将 AI 深度融入编程工作流程。它最大的亮点在于实现了 “0 代码编程”，用户只需通过自然语言与它进行对话，清晰描述自己的需求，Cursor 就能自动生成代码片段，甚至可以自动创建文件并添加代码，极大降低了编程门槛，让编程变得更加简单高效。

相比其它编程工具，它的主要优势有两点：

代码生成与编辑能力更强大：Cursor 在代码生成方面能力全面，不仅能逐行补全，还能依据自然语言描述创建整个函数甚至多文件结构。反观部分主流工具，可能仅能针对单个函数或局部代码进行补全，难以从项目层面构建完整的多文件代码体系。在代码编辑上，Cursor 能快速定位并批量修改相关文件，而一些其他工具可能仅局限于单个文件内操作，面对跨文件复杂编辑任务则力不从心。

强上下文理解能力：Cursor 的 codeBase 是基于整个工程，能参考多个文件提供建议，全面理解项目架构和文件间关系，这是许多同类工具所不及的。如 GitHub Copilot 只是基于当前文件的，无论是代码解释、优化、生成注释，都是基于当前文件的内容，因此可能无法全面关联上下文，需开发者多次细化描述，难以一次性准确生成符合整体项目需求的代码。

• 原理

像 copilot 这些 AI 编程工具的运行逻辑，从当前文件中获得代码的上下文再结合你的提问（prompt），一起发给 LLM，最后得到结果。其实这已经能解决不少问题了，在没有 cursor 之前感觉很不错，写程序确实能提高效率。

cursor 的逻辑是，先将工程内的所有代码进行索引和向量化（Embedding），再之后你的所有提问都是基于整个工程给你答案，它会将你的提问结合整个工程的代码一起提交给 LLM。

下面就来展示如何借助 Cursor，从零基础开始，逐步完成一个功能完备的 Chrome 翻译朗读插件开发流程。

Cursor 开发 Chrome 插件

不管你之前有没有接触过 Chrome 浏览器插件开发，现在你只需要负责输入 prompt 描述你的需求，然后就可以把一切交给 Cursor 去完成。

下图是 cursor官网 提供的开发流程指导：

接下来就按这个步骤实现一个浏览器插件的开发。

需求分析与设计

现在 文生图 的工具有很多，比如豆包，下面通过豆包生成了一张猫的图像，但是会发现左上角带有 AI生成 的水印，往往我生成的图片是需要保存的，但是不想要这个水印，于是就想开发一个 Chrome浏览器插件来去除这个水印。

现在就明确了插件的需求：开发一个能在豆包上下载保存图片的Chrome插件，能够自动去除下载图片时的水印。

• 优化Prompt

需求分析与设计是项目开发的起点，使用 Cursor 时，Prompt的质量 决定了 AI生成代码的准确性，因此需要通过优化 Prompt 来得到更符合预期的需求。比如明确 AI 的角色、提供具体的细节要求、提供示例等，优化 Prompt 可以参考 智谱AI开放平台 的总结。

优化后的Prompt： 

你是一名精通Chrome浏览器插件开发的专家，拥有10年以上的Chrome浏览器插件开发经验。你的任务是根据用户的描述，开发chrome浏览器插件。 我想开发一个能在豆包上下载保存图片的Chrome插件，能够去除我直接从网站下载图片时出现的水印问题。 豆包的网站类似： @https://www.doubao.com/chat/11260882687670274 它所生成的图片，我按F12看到的元素是这个：<img src="https://p9-flow-imagex-sign.byteimg.com/ocean-cloud-tos/image_skill/e01886c2-4122-47b5-a5f9-161766e58316_1751779454414810674~tplv-a9rns2rl98-web-preview-watermark.png?rk3s=b14c611d&amp;x-expires=1783315454&amp;x-signature=yMspA%2BJ17wj4zftydHtouxSbcoE%3D"> 

代码实现

cursor中准备一个project工程文件夹，输入下面提示词：

接下来 Cursor 的 Agent模式 就会自主探索、规划来创建项目了。

可以看到项目目录结构都已经创建完毕，并且添加了相应的 README 文档，按照文档进行插件的安装，在管理扩展程序界面，打开该文件夹，即可进行插件的安装。 

调试验证

添加插件时出现问题

cursor不给我们生成缺少的图片，安全原因，那么就需要我们自己手动添加。输入 prompt：

将插件文件夹发布到chrome浏览器，报图片的错误，你给我从网上查找几张图片放在对应的位置

使用cursor调试：

添加图片后重新加载插件即可：

插件有错误信息显示

错误信息：Uncaught TypeError: images.push is not a function

cursor调试

错误信息已解决：

测试和调试功能

现在 豆包 图片的界面变成这个样子了，右上角多了下载的按钮。

先来测试下功能是否可用，选中图片点击下载，发现下载失败。

控制台报错误：下载图片 doubao_selected_1.png 失败: Error: HTTP 403

让curosr修复：

下载图片 doubao_selected_1.png 失败: Error: HTTP 403 解决错误信息

再次测试，能正常下载，但是发现水印没去除：

cursor调试：

现在点击右上角的下载选中图片，能正常下载图片，但下载后的图片左上角的水印还是存在，没有去除，请进行修复

再次测试，水印已成功去除：

此时你就已经完成整个 Crhome浏览器插件 的开发了，你发现没，是不是零基础，不需要写一行代码，cursor就能帮你完成项目的开发和调试。

当然，后续如果你要上架到 Chrome应用商店 的话也是可以的，先去 注册 成为 Chrome应用商店开发者，然后就可以发布自己的插件了。

结语

🔥如果此文对你有帮助的话，欢迎💗关注、👍点赞、⭐收藏、✍️评论，支持一下博主~