用Cursor+Chrome插件开发实战：5分钟搞定豆包图片去水印（附完整代码）

用Cursor+Chrome插件开发实战：5分钟搞定豆包图片去水印（附完整代码）

最近在浏览一些AI绘画社区时，发现不少朋友都在讨论一个共同的需求：从某些在线AI绘图平台生成的图片，保存下来时总带着平台的水印，影响二次使用。我自己也遇到过类似情况，尤其是在豆包这类工具上生成的创意图片，想用作个人项目素材时，那个小小的水印标识总显得有些碍眼。手动处理？一张两张还行，数量一多就太费时间了。

有没有一种方法，能让我们在浏览时一键保存无水印原图呢？作为一个喜欢折腾效率工具的人，我立刻想到了Chrome插件——它可以直接与网页交互，理论上能拦截图片请求、处理图像数据。但一想到要写manifest.json、content script、background script这些，对于前端经验不多的朋友来说，门槛似乎不低。

直到我尝试用Cursor的Agent模式来驱动整个开发流程。整个过程之顺畅，让我觉得有必要把这次“零代码”实战记录下来。核心思路是：我们只负责清晰地描述问题，让AI去规划项目结构、编写代码、甚至调试错误。 下面，我就带你完整走一遍这个“5分钟”极速开发之旅，即使你从未写过Chrome插件，也能跟着做出一个可用的工具。

1. 环境准备与项目初始化

在开始之前，我们需要确保手头有两样工具：Chrome浏览器和Cursor编辑器。Chrome自不必说，Cursor是一款集成了强大AI助手的代码编辑器，它的“Agent模式”能理解整个项目的上下文，并主动执行创建文件、编写代码、调试修复等任务，而不仅仅是单行补全。

首先，在你的电脑上创建一个空文件夹，命名为 doubao-image-saver，然后用Cursor打开这个文件夹。这一步很重要，因为Cursor的Agent模式会基于当前打开的文件夹作为项目根目录来生成代码。

接下来，就是与AI对话的起点。我们需要给Cursor一个清晰、具体的指令。这个指令的质量，直接决定了生成代码的准确性和完整性。我经过几次尝试，总结出一个高效的Prompt结构：

你是一名资深的Chrome插件开发专家。请为我创建一个Chrome浏览器扩展，用于在豆包的AI绘画对话页面（类似 https://www.doubao.com/chat/* 这样的页面）上工作。

核心功能：

1. 在用户右键点击页面中的AI生成图片时，上下文菜单中新增一个“下载无水印图片”的选项。
2. 点击该选项后，插件能获取到图片的原始URL（通常来自 img 标签的 src 属性）。
3. 插件需要能处理可能遇到的跨域或403禁止访问问题，成功获取图片数据。
4. 在内存中对图片进行处理，移除左上角可能存在的“AI生成”水印区域（假设水印为固定位置、固定大小的半透明图标）。
5. 将处理后的图片以PNG格式保存到用户本地，文件名建议包含时间戳以防覆盖。

技术要求：

• 使用Manifest V3规范。
• 包含必要的图标资源（可以先用占位图，后续替换）。
• 代码结构清晰，有详细的注释。
• 请直接开始创建项目所需的全部文件。

将这段Prompt输入到Cursor的聊天框中，并确保点击了“Agent”模式开关。接下来，你就可以泡杯茶，观察Cursor的表演了。它会像一位真正的开发者一样，开始思考、规划，并在你的项目文件夹里创建出如下结构的文件：

doubao-image-saver/
├── manifest.json          # 插件配置文件
├── background.js          # 后台服务脚本
├── content.js            # 注入页面的内容脚本
├── popup.html            # 插件弹出窗口的HTML（可选，本例可能不需要）
├── popup.js              # 弹出窗口的JS逻辑
├── icon16.png            # 插件图标（16x16）
├── icon48.png            # 插件图标（48x48）
├── icon128.png           # 插件图标（128x128）
└── README.md             # 使用说明

Cursor生成的 manifest.json 通常会是这样：