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

技术文档

前言

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

🍅 个人主页：陈三心

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看到的元素是这个：