告别代码！我用Trae氛围编程的方式，开发了一款公众号文章同步插件！
<p><span>大家好，我是编程乐趣。</span><span>我利用周末时间，<span>没有写任何一行代码，<span>用Trae氛围编程的方式，<span>完成一个浏览器插件的开发。</span></span></span></span><span><span>最大的感受是，未来编程方式，对阅读代码、代码语法、编程语言等能力变得不再重要，懂得与AI对方才是最重要的能力。</span></span><span>下面和大家分享下，我开发这款插件的完整过程与感受。</span></p><p><strong>该插件我已经在Github开源了，大家自行文末获取。</strong></p>
<p> </p>
<p><strong>一、插件产品介绍</strong></p>
<p data-pm-slice="0 0 []"><strong># 产品简介</strong></p>
<p data-pm-slice="0 0 []">一个浏览器插件，用于在公众号文章页面自动显示同步按钮，支持一键同步到多个平台。</p>
<img src="https://img2024.cnblogs.com/blog/93789/202601/93789-20260118190024657-790542621.png" alt="图片" class="rich_pages wxw-img" data-src="https://mmbiz.qpic.cn/sz_mmbiz_png/tJJDa2wmJiaqLOAEogvriaWicMQ1OBBdRaJOANvibLiaaUQfKvib7vZEOTXgj67CgZo8ue0DuaEYK1k0TOwzTh9Drp4w/640?wx_fmt=png&from=appmsg&watermark=1#imgIndex=0" data-ratio="0.4925925925925926" data-s="300,640" data-type="png" data-w="1080" data-imgfileid="302462737" data-aistatus="1" data-original-style="null" data-index="2" data-report-img-idx="0" data-fail="0">
<p data-pm-slice="0 0 []"><strong># 功能特性</strong></p>
<p>- 📤 在公众号文章页面自动注入同步按钮</p>
<p>- 🔄 支持一键同步到多个平台</p>
<p>- ✅ 支持平台勾选选择</p>
<p>- 🎨 美观易用的UI界面</p>
<p><strong># 当前支持的平台</strong></p>
<p>- 📝 CSDN</p>
<p>- 🏫 博客园</p>
<p>- 🧠 知乎</p>
<p>- 📰 今日头条</p>
<p><span> </span></p>
<p><strong>二、开发完整步骤流程</strong></p>
<p><span><span>由于开发过程中，没有截图，我只能通过文字来和大家分享。</span></span></p>
<span><span>1、我告诉Trae，我要开发一款公众号文章同步浏览器插件，并罗列要支持的平台、需要完成的功能。</span></span><span><span>Trae：可以完整生成插件代码，同时会生成logo图片的配置信息。但没有生成logo图片。</span></span><img src="https://img2024.cnblogs.com/blog/93789/202601/93789-20260118190024519-1701600050.png" alt="图片" class="rich_pages wxw-img" data-src="https://mmbiz.qpic.cn/sz_mmbiz_png/tJJDa2wmJiaqLOAEogvriaWicMQ1OBBdRaJJTB3SWVpzmEovMP5K2IOLQLH5ia1NszNj5RQMAtvT6eQ4pyKyHl6HBA/640?wx_fmt=png&from=appmsg&watermark=1#imgIndex=1" data-ratio="0.42752562225475843" data-s="300,640" data-type="png" data-w="683" data-imgfileid="302462738" data-aistatus="1" data-original-style="null" data-index="3" data-report-img-idx="1" data-fail="0"><span><span>2、<span data-pm-slice="1 1 ["para",{"tagName":"section","attributes":{},"namespaceURI":"http://www.w3.org/1999/xhtml"}]">我告诉Trae，帮我生成一个logo图片，用于做这个浏览器插件图标。这个产品我取名为：OneClick，<span data-pm-slice="1 1 ["para",{"tagName":"section","attributes":{},"namespaceURI":"http://www.w3.org/1999/xhtml"}]">设计要求：<span data-pm-slice="1 1 ["para",{"tagName":"section","attributes":{},"namespaceURI":"http://www.w3.org/1999/xhtml"}]">logo用产品名、绿色背景。</span></span></span></span></span><img src="https://img2024.cnblogs.com/blog/93789/202601/93789-20260118190024555-1868309316.png" alt="图片" class="rich_pages wxw-img" data-src="https://mmbiz.qpic.cn/sz_mmbiz_png/tJJDa2wmJiaqLOAEogvriaWicMQ1OBBdRaJGaTu0iamkoKvX9ayaRoX8YD97hXvtjxLjLcd8DBoHRp3GVjeSMtC3pw/640?wx_fmt=png&from=appmsg&watermark=1#imgIndex=2" data-ratio="0.3232104121475054" data-s="300,640" data-type="png" data-w="461" data-imgfileid="302462739" data-aistatus="1" data-original-style="null" data-index="4" data-report-img-idx="2" data-fail="0"><span data-pm-slice="1 1 ["para",{"tagName":"section","attributes":{},"namespaceURI":"http://www.w3.org/1999/xhtml"}]"><span>Trae：<span data-pm-slice="1 1 ["para",{"tagName":"section","attributes":{},"namespaceURI":"http://www.w3.org/1999/xhtml"}]"><br></span></span></span>
<ul class="list-paddingleft-1">
<li><span data-pm-slice="1 1 ["para",{"tagName":"section","attributes":{},"namespaceURI":"http://www.w3.org/1999/xhtml"}]">Trae会检测我电脑环境是否安装node，并使用node生成logo图片，但执行过程中发现我node版本过低，提示我要安装node相关插件。</span></li>
<li><span>我电脑有安装多个node版本，Trae没有检测我电脑是否存在多个版本，直接提示我缺少相关插件，并给出<span>确认按钮，问我是否要安装插件，这边需要我人工点击确认。</span></span></li>
<li><span><span>我点击确认后，Trade自动生成logo.svg文件，并根据要求生成不同尺寸的logo文件。</span></span></li>
</ul>
<span><br></span><span><span>3、<span>完成以上步骤后，我把插件导入到Chrome浏览器，并尝试运行。<span>结果并不能完整运行。</span></span></span></span>
<ul class="list-paddingleft-1">
<li><span>插件实现方式，打开不同标签页面，并自动填充标题、内容。有部分平台可以正确填充，有些不行。</span></li>
</ul>
<span><br></span><span><span>4、<span>我告诉Trae，<span>不要使用打开不同标签页面的方式<span>，改为后台自动运行的方式。</span></span></span></span></span><span><span>Trae<span>：可以正确理解我要使用ApI的方式，并进行修改。</span></span></span><span><br></span><span><span>5、完成修改后，我进行测试，依然是无法完成同步。</span></span><span><span>6、<span>接下去的几轮对话中，<span>我不断告诉Trae，同步功能有问题，插件界面有显示同步错误情况，我也把错误情况发送给Trae<span>，Trae也不断的进行代码修改，最终也是不能实现。</span></span></span></span></span><span><span>7、<span>我做了一个改变，查看浏览器的运行日志。并把更详细错误日志发送给Trae。Trae根据更详细日志，也修复几个Bug，但并不能完整实现同步功能。</span></span></span><span><span>8、<span>经过好几轮的对话，并不能实现我想要的功能，<span>我于是让Trae打印更详细的日志，方便我给她反馈<span>。Trae修改代码，并打印更详细的日志。</span></span></span></span></span><img src="https://img2024.cnblogs.com/blog/93789/202601/93789-20260118190024519-743493286.webp" alt="图片" class="rich_pages wxw-img" data-src="https://mmbiz.qpic.cn/sz_mmbiz_png/tJJDa2wmJiaqLOAEogvriaWicMQ1OBBdRaJUj3noGSrGdnk3riaCFSibYgfr5Dj9kyCzVdSmn3ak52KX7K00DHIiaibRA/640?wx_fmt=png&from=appmsg&watermark=1#imgIndex=3" data-ratio="0.38796296296296295" data-s="300,640" data-type="png" data-w="1080" data-imgfileid="302462740" data-aistatus="1" data-original-style="null" data-index="5" data-report-img-idx="3" data-fail="0"><span><span>9<span>、继续经过好几轮对话，还是不能正确实现功能。通过日志查看，Trae提交的API，并不是正确的。<span>这个是由于各个平台，并没有公开的API文档<span>，所以Trae是通过搜索网络文档和猜测的方式，不断修改代码。</span></span></span></span></span><span><span>10、<span>由于不能实现功能，我只能是到各个平台，手动操作保存文章草稿，并通过浏览器插件，提取相关的接口Url、请求标头、提交报文等信息。</span></span></span>
<ul class="list-paddingleft-1">
<li><span>有些平台支持markdown、有些只能是富文本形式。</span></li>
<li><span>提取图片上传接口、保存草稿的接口的相关报文。</span></li>
</ul>
<p>
<span><br></span><img src="https://img2024.cnblogs.com/blog/93789/202601/93789-20260118190024613-576081230.webp" alt="图片" class="rich_pages wxw-img" data-src="https://mmbiz.qpic.cn/sz_mmbiz_png/tJJDa2wmJiaqLOAEogvriaWicMQ1OBBdRaJsicjOfJvUanKic1lz60uibQtkib6fR9xRBvJ2oJM4TMywmTEaTDYscgYdg/640?wx_fmt=png&from=appmsg&watermark=1#imgIndex=4" data-ratio="0.4962962962962963" data-s="300,640" data-type="png" data-w="1080" data-imgfileid="302462741" data-aistatus="1" data-original-style="null" data-index="6" data-report-img-idx="4" data-fail="0"><span><span>11<span>、通过我给的报文，插件可以正确提交，但都提示未登录、或者没权限。我告诉Trae，分别先访问各个平台后台（我整理各个平台后台Url），并获取Cookie并由于接口提交。</span></span></span><span><span>12<span>、通过以上的方式，并结合打印的日志，我不同让Trae调整，最终完整实现功能。</span></span></span><span><br></span></p>
<p><strong><span data-pm-slice="1 1 ["para",{"tagName":"section","attributes":{},"namespaceURI":"http://www.w3.org/1999/xhtml"}]">三、开发总结</span></strong></p>
<p><span data-pm-slice="1 1 ["para",{"tagName":"section","attributes":{},"namespaceURI":"http://www.w3.org/1999/xhtml"}]"><span>1、在这过程中，我没有手动<span>编写任何一行代码<span>。</span></span></span></span></p>
<p><span data-pm-slice="1 1 ["para",{"tagName":"section","attributes":{},"namespaceURI":"http://www.w3.org/1999/xhtml"}]"><span>2、不再需要阅读代码，<span>只要把错误日志反馈给AI，AI就能正确的修改<span>。</span></span></span></span></p>
<p><span data-pm-slice="1 1 ["para",{"tagName":"section","attributes":{},"namespaceURI":"http://www.w3.org/1999/xhtml"}]"><span>3、过程中，一直无法实现功能，<span>记得要求AI打印更详细的日志<span>，<span>方便我们给AI反馈。</span></span></span></span></span></p>
<p><span data-pm-slice="1 1 ["para",{"tagName":"section","attributes":{},"namespaceURI":"http://www.w3.org/1999/xhtml"}]"><span>4、虽然不用编写代码、阅读代码，但<span>对实现原理还要知道的<span>。否则，我就不懂通过查看浏览器报文的形式，给AI反馈了。</span></span></span></span></p>
<p><span><span>最后<span>，现在对程序员的要求已经完全变了。代码语法、代码规范、编程语言等过去要求的能力，变得越来越不重要了。</span></span></span><span><span>你只需懂得各种原理、各种知识点的概念，就能实现开发了。</span></span></p>
<p><span><br></span><strong>四、插件下载</strong></p>
<p><span><span>代码我已经提交到Github，大家可以自行下载，或者网盘下载。</span></span></p>
<p><span><span>开源项目：<span><br></span></span></span><span>https://github.com/bianchenglequ/OneClick</span></p>
<p><span><span>网盘下载：<span><br></span></span></span><span>https://pan.quark.cn/s/9ef2717f5203</span></p><br><br>
来源：https://www.cnblogs.com/chingho/p/19498962
頁:
[1]