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

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实现,简单高效。

开发心得

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

下一步?

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

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

相关推荐
薛定猫AI10 小时前
【技术干货】Claude Code多模型代理与反馈闭环:Python实现可验证的AI编程工作流
开发语言·python·ai编程
必须会一定会10 小时前
AI 编程隐私保护清单:API Key、代码上传、Agent 权限与 Git 历史排查
人工智能·git·ai编程
plainGeekDev10 小时前
外层六构件:把 Loop 放大成系统
ai编程·claude
火云牌神11 小时前
长连接与流式推送:规范 SSE / WebSocket 实现,替换无效轮询
websocket·网络协议·架构·ai编程·流式推送
码农飞哥11 小时前
RAG 翻车实测 + LangGraph Agent 实时抓取修复
人工智能·爬虫·langchain·ai编程·亮数据
9i编程12 小时前
9. AI编写的SKILL,坑我一一试过,这次我自己改写:逐行Code Review登录代码:username改名account、伪删除双键唯一,4个设计坑一次
人工智能·openai·ai编程
CodeStats12 小时前
【Java进程通信】Java进程通信系统完全指南:从ProcessBuilder底层原理到多语言实战
java·前端·python·进程·ai编程·processbuilder
sigterM先生13 小时前
Ollama + Go 搭建 AI 告警分析管道
后端·ai编程
yjm00213 小时前
Codex 桌面端新会话 5 次 Reconnecting?HTTP/SSE 降级配置修复方案(2026 实测)
openai·ai编程
Web3_Basketball13 小时前
3行代码带你跑通DeepSeek V4多模态文档识别/OCR
ai编程