许昌市网站建设_网站建设公司_过渡效果_seo优化
2026/1/18 19:03:18 网站建设 项目流程

大家好,我是编程乐趣。我利用周末时间,没有写任何一行代码,用Trae氛围编程的方式,完成一个浏览器插件的开发。最大的感受是,未来编程方式,对阅读代码、代码语法、编程语言等能力变得不再重要,懂得与AI对方才是最重要的能力。下面和大家分享下,我开发这款插件的完整过程与感受。该插件我已经在Github开源了,大家自行文末获取。

 

一、插件产品介绍

# 产品简介

一个浏览器插件,用于在公众号文章页面自动显示同步按钮,支持一键同步到多个平台。

图片

# 功能特性

- 📤 在公众号文章页面自动注入同步按钮

- 🔄 支持一键同步到多个平台

- ✅ 支持平台勾选选择

- 🎨 美观易用的UI界面

# 当前支持的平台

- 📝 CSDN

- 🏫 博客园

- 🧠 知乎

- 📰 今日头条

 

二、开发完整步骤流程

由于开发过程中,没有截图,我只能通过文字来和大家分享。

1、我告诉Trae,我要开发一款公众号文章同步浏览器插件,并罗列要支持的平台、需要完成的功能。Trae:可以完整生成插件代码,同时会生成logo图片的配置信息。但没有生成logo图片。图片2、我告诉Trae,帮我生成一个logo图片,用于做这个浏览器插件图标。这个产品我取名为:OneClick,设计要求:logo用产品名、绿色背景。图片Trae:
  • Trae会检测我电脑环境是否安装node,并使用node生成logo图片,但执行过程中发现我node版本过低,提示我要安装node相关插件。
  • 我电脑有安装多个node版本,Trae没有检测我电脑是否存在多个版本,直接提示我缺少相关插件,并给出确认按钮,问我是否要安装插件,这边需要我人工点击确认。
  • 我点击确认后,Trade自动生成logo.svg文件,并根据要求生成不同尺寸的logo文件。

3、完成以上步骤后,我把插件导入到Chrome浏览器,并尝试运行。结果并不能完整运行。
  • 插件实现方式,打开不同标签页面,并自动填充标题、内容。有部分平台可以正确填充,有些不行。

4、我告诉Trae,不要使用打开不同标签页面的方式,改为后台自动运行的方式。Trae:可以正确理解我要使用ApI的方式,并进行修改。
5、完成修改后,我进行测试,依然是无法完成同步。6、接下去的几轮对话中,我不断告诉Trae,同步功能有问题,插件界面有显示同步错误情况,我也把错误情况发送给Trae,Trae也不断的进行代码修改,最终也是不能实现。7、我做了一个改变,查看浏览器的运行日志。并把更详细错误日志发送给Trae。Trae根据更详细日志,也修复几个Bug,但并不能完整实现同步功能。8、经过好几轮的对话,并不能实现我想要的功能,我于是让Trae打印更详细的日志,方便我给她反馈。Trae修改代码,并打印更详细的日志。图片9、继续经过好几轮对话,还是不能正确实现功能。通过日志查看,Trae提交的API,并不是正确的。这个是由于各个平台,并没有公开的API文档,所以Trae是通过搜索网络文档和猜测的方式,不断修改代码。10、由于不能实现功能,我只能是到各个平台,手动操作保存文章草稿,并通过浏览器插件,提取相关的接口Url、请求标头、提交报文等信息。
  • 有些平台支持markdown、有些只能是富文本形式。
  • 提取图片上传接口、保存草稿的接口的相关报文。


图片11、通过我给的报文,插件可以正确提交,但都提示未登录、或者没权限。我告诉Trae,分别先访问各个平台后台(我整理各个平台后台Url),并获取Cookie并由于接口提交。12、通过以上的方式,并结合打印的日志,我不同让Trae调整,最终完整实现功能。

三、开发总结

1、在这过程中,我没有手动编写任何一行代码

2、不再需要阅读代码,只要把错误日志反馈给AI,AI就能正确的修改

3、过程中,一直无法实现功能,记得要求AI打印更详细的日志方便我们给AI反馈。

4、虽然不用编写代码、阅读代码,但对实现原理还要知道的。否则,我就不懂通过查看浏览器报文的形式,给AI反馈了。

最后,现在对程序员的要求已经完全变了。代码语法、代码规范、编程语言等过去要求的能力,变得越来越不重要了。你只需懂得各种原理、各种知识点的概念,就能实现开发了。


四、插件下载

代码我已经提交到Github,大家可以自行下载,或者网盘下载。

开源项目:
https://github.com/bianchenglequ/OneClick

网盘下载:
https://pan.quark.cn/s/9ef2717f5203

需要专业的网站建设服务?

联系我们获取免费的网站建设咨询和方案报价,让我们帮助您实现业务目标

立即咨询