VIbe Coding-5分钟重写一个Chrome插件：EasyCopy复制标题和URL

juejin.cn/aicoding AI编程板块了解更多AI编程干货

5分钟重写一个Chrome插件：EasyCopy复制标题和URL

前段时间，我写的一个复制网页标题和URL的Chrome插件源码不小心被删了。索性重写一把，凭借两周的Vibe Coding经验，熟练度提升明显，这次只花了5分钟就搞定。过程顺畅，成果在线，下面是开发复盘和心得。

实现步骤

1. 搭建环境
   新建一个文件夹，用Windsurf（我的主力编辑器，可能是VS Code的别称）打开。简单几秒，开发环境就绪。

2. 参考规则
   从Cursor Directory复制一份Chrome插件开发规则，粘贴到新文件，命名为rules.md。有了这个规范，开发方向一目了然。

3. 定义需求
   根据rules.md，我写了个提示词，明确插件功能：一键复制当前网页标题和URL。需求简单清晰，比如无弹窗、点击即复制、成功后有反馈等。（具体提示词见图1，懒得再贴了）

4. 图标设计
   用icon.kitchen生成一个插件图标，存在项目文件夹里，并在manifest.json中指定使用。外包设计给工具，省时又好看。

5. 开发与优化
   按规则和需求敲代码，一次跑通！后续三轮对话主要是调细节：去掉弹窗、优化成功反馈的样式（比如短暂高亮图标）。最终效果简洁流畅。

成果展示

插件名叫EasyCopy，点击图标就能复制当前网页的标题和URL到剪贴板。代码基础是manifest.json和background.js，核心逻辑用navigator.clipboard实现，简单高效。

• 下载地址：pan.quark.cn/s/bb8dcf197…
• 图标工具：icon.kitchen
• 规则参考：来自cursor.directory

开发心得

• 效率飞升：两周Vibe Coding让我对插件开发驾轻就熟，5分钟完成一个功能不再是梦。
• 工具为王：icon.kitchen搞定图标，Cursor Directory提供规范，省下大量摸索时间。
• 迭代专注体验：一次成功后，优化集中在用户体验，比如去掉弹窗、加反馈，这些小细节很加分。

下一步？

这次重写让我信心倍增，下个目标可能是加个右键菜单，或者支持自定义复制格式。有想法欢迎评论交流！插件已开源在链接里，大家试用后反馈下呗～

编译内容来源：x.com/vista8/thre…