前言：为什么要做这样一个插件

我作为一个已经离开学校多年，英语单词也基本忘得差不多的职场人，却在日常的工作学习中发现，不时都会有浏览一些有英语相关的网站的情况，而多数这种时候，都是直接使用整篇翻译，这导致了不会去对照原文，也不会去看原来不会的单词是什么意思，要记下来，更是懒得去记。

在这个情况下，我想能不能在时间不紧张的时候尽量地看一些原文，见到不知道的单词的时候再搜呢？

恰好我最近在尝试使用进行vibe coding，就想着0基础的我不能通过cursor解决以下的一些小痛点：

（1）刷网页时，在阅读英语原文的时候，能选长句或者单句进行直接翻译；

（2）我需要有一个方便的单词本，可以让我随时记录；

（3）因为不会经常去特意去背单词，我需要知道哪些单词是我经常要重新搜的。

插件介绍

这是一款沉浸式英语学习辅助插件，支持在浏览网页时快速收集英语单词，自动获取翻译并智能管理单词本。插件集成了多种翻译服务（有道翻译、Coze翻译等），提供便捷的右键菜单操作、浮动式单词本界面，以及丰富的数据筛选和导出功能，让英语学习变得更加高效。

开发流程记录

（1）刚开始只有一个大概的idea，这里我选择了用deepseek进一步地交流和深化，看是否能补完和丰富我的一些想法，并且帮我确定大致的技术路径，这一步是为了丰富提供给cursor的需求文档，指导我完善一些插件交互操作。

（2）创建一个文件夹，作为项目存储位置，同时使用Axure绘制了几张原型草图。

（3）使用cursor中输入提示词和原型草图，明确的交互顺序和列出每一步开发顺序，让AI输出需求文档，接下来就是看文档，和持续优化文档。

（4）到这步，需求文档里面已经有了需要进行的每一步操作，因为该插件只需要简单前端页面，不需要准备额外的后端开发环境，可以直接进一步的开发，无需使用框架。

 根据文档中的每一步内容，让cursor进行开发任务。（这里也可以一次性执行全部开发步骤，实测拆解每一步实施，效果会更好），其中第四步中提到了需要第三方API，可在第三方开发者平台注册，新用户一般都会有一定的免费额度，这里我用了有道的接口，一并把接口文档和密钥一同输入。

（5）接下来就是插件持续地报错和解决错误的时间，直到完成最终效果；

（6）后面因翻译的长句不理想，替换了coze的工作流，让翻译更加顺畅和完整；

功能特性

智能单词收集

选中网页中的英文文本，快捷键Alt+W自动提取并翻译英文单词。

多翻译源支持

集成有道翻译、Coze翻译等多种翻译服务，确保翻译质量和服务稳定性。

浮动单词本

页面右下角浮动按钮，一键打开单词本，查看已收集的单词，支持按日期和频次排序。

数据统计分析

详细的学习统计，包括总单词数、今日新增、录入次数等，帮助跟踪学习进度。

本地数据存储

所有数据存储在浏览器本地，保护隐私安全，支持数据导出和备份。

后记

这是我的第一次vibe coding尝试，虽然是一个简单的工具，但是不得不感慨AI的发展已经超出了自己的预期，以后也许“想法”会更加重要。