news 2026/6/29 5:56:07

用AI开发Chrome插件的真实踩坑记录:拼多多开票工具做出来了,但过程不是网上说的那么简单

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
用AI开发Chrome插件的真实踩坑记录:拼多多开票工具做出来了,但过程不是网上说的那么简单

一句话结论:AI帮我做出了一个能用的插件,这个结果是真的。但过程里有太多"网上教程没说的事"——AI会删掉之前对的代码、复杂逻辑需要你画出流程图、调试的时候你盯着报错信息完全不懂是什么。能做出来,但你要有心理准备。

坑一:AI改bug的时候会破坏之前已经修好的东西

这是最让我崩溃的一点。你已经调好了导出功能,CSV文件格式完美——然后让AI去优化一下批量开票的逻辑。AI改完批量开票之后,导出功能坏了。不是小坏,是整个导出按钮点下去没反应。你问AI"为什么导出不行了?"AI说"我没有改动导出相关的代码。"你去看代码diff——它确实改了导出相关的部分,只是它自己不觉得相关。

这个问题在大型项目里更严重。代码模块之间有关联,AI不一定理解这种关联。它可能因为批量开票需要加一个数据处理逻辑,顺手改了数据处理模块里的一个函数——而这个函数也被导出功能用着。改完批量开票好了,导出挂了。

怎么解决:每次AI改完代码,把主要功能全部点一遍——导出、开票、查询、状态显示。别只测它改的那个。这个回归测试的习惯是被坑出来的。

坑二:AI对"简单需求"的理解跟你不一样

有一次我想让发票申请失败的时候弹一个提示告诉用户"这张票开不了,因为XXX"。我跟AI说:"如果发票申请失败,显示一条错误提示。"

AI给我加了一个弹窗——每次失败都弹一个alert框,你需要手动点确定才能继续下一张。问题来了——批量开票一次跑50张,如果有十几张失败了,你得点十几个确定弹窗。这不是自动化,这是把"点提交按钮"换成了"点确定按钮"。

AI没有错,它确实加了错误提示。但它不理解"批量自动化"的上下文——在这个上下文中,"提示"不应该是阻断性的弹窗,而应该是在面板里静默标记失败的订单。

这件事教会我:跟AI描述需求的时候,不光要说"做什么",还要说"在什么场景下"和"不能怎么做"。后来我学会了加约束条件——"失败提示静默显示在面板列表里,不要弹窗阻断流程"。

坑三:拼多多页面变化了,插件跟着坏

插件做到一半的时候,拼多多改版了订单详情页。原来发票申请按钮的CSS类名变了,插件找不到按钮了——整个批量开票功能失灵。

我完全不知道该怎么修——我对拼多多的页面结构根本不了解,我连那个按钮原来叫什么类名都不知道。AI以前写的代码里引用了那个类名,AI能找到自己引用过什么。但我得告诉AI"页面变了,以前的选择器现在找不到了"。

我把拼多多新页面的HTML片段截下来给AI:"这个页面里发票申请按钮的HTML结构变了,帮我更新选择器。"AI对比了新旧结构,找到了新按钮的位置,更新了代码。但我当时完全不懂为什么坏了,慌了至少半小时。

这个坑告诉我:用AI做出来的产品,维护的时候还是得靠AI。你的维护成本不是"自己改代码",是"描述清楚哪里变了"。

坑四:看不懂报错,不知道怎么跟AI说

Chrome浏览器F12打开Console,红色的报错信息有时候是完整的一句话,比如"TypeError: Cannot read property 'xxx' of undefined"。这种直接丢给AI它能看懂。

但有时候报错只有一行"Failed to load resource: the server responded with a status of 404",没有堆栈、没有文件名。我也不知道哪个资源报的404。丢给AI看,AI也猜不到——因为404可能是几十个网络请求中的任何一个。

这种情况只能回到基础:哪里出问题就看哪里的网络请求。打开开发者工具的Network面板,看看点批量开票按钮的时候哪个请求是红色的。把那个请求的URL和状态码发给AI。从"现象"定位到"具体请求"这一步,AI帮不了你,得你自己找。

但说实话,这些坑踩完了也就踩完了

上面说的都是踩坑经历,但没有一个坑是踩完过不去的。AI删了你之前的代码——你可以用git回退,再重新让AI改。页面改版了选择器失效——截屏给AI让它更新。报错看不懂——F12慢慢翻,总能找到那个红色的请求。

关键是心态。如果你期待的是"一句话描述需求,AI变出一个完美应用"——你会失望。如果你期待的是"有一个很聪明的东西能帮你写90%的代码,但需要你不断试、不断改、不断纠偏"——那AI编程就是这样,它确实是这样的。

用AI写代码不是坐电梯,是爬楼梯。每一级都能迈上去,但每一步都得自己迈。

常见问题

遇到AI删掉之前的正确代码,除了手动回退还有什么办法?

用Git。每次AI改之前commit一次,改完测完没问题再commit。出问题了直接git diff看改了哪些文件,不想保留的回退。Git是AI编程的安全绳,不用Git等于高空作业不系绳。

AI对不同类型的技术栈支持有差别吗?

差别很大。JavaScript、Python、React这种主流技术栈AI表现很好。但特定平台的小众API——比如Chrome Extension的某些API——AI可能不够熟。我的经验是让AI读官方文档再写代码,比直接让它写效果更好。

踩了这么多坑,你觉得值得吗?

值得。因为踩坑的过程虽然折磨,但踩完之后你手里有一个真正能用的东西。而且它能一直帮你省时间。如果我不自己做这个插件,到现在每个月底我还是得手工点发票、手抄Excel。跟那个比,踩坑的苦算不了什么。

如果现在重新用AI做一次,会快多少?

大概快三到四倍。第一次大部分时间花在"不知道怎么描述"和"看不懂报错"上。现在知道怎么拆需求、怎么给上下文、怎么用Git配合AI——这些经验是通用的。工具差不多,但用工具的人不一样了。

我的成果:duoduoke.net

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/6/29 5:55:45

EasyCVR平台GB28181接入海康NVR显示离线,如何定位与修复?

1. 问题现象与初步判断 最近在部署EasyCVR平台时遇到一个典型问题:通过GB28181协议接入的海康威视NVR设备在平台上始终显示"离线"状态。这种情况在实际项目中并不少见,但每次排查都需要系统性地梳理各个环节。我们先从最基础的网络连通性开始检…

作者头像 李华
网站建设 2026/6/29 5:55:35

终极植物大战僵尸修改器指南:3步掌握PVZ Toolkit完整功能

终极植物大战僵尸修改器指南:3步掌握PVZ Toolkit完整功能 【免费下载链接】pvztoolkit 植物大战僵尸 PC 版综合修改器 项目地址: https://gitcode.com/gh_mirrors/pv/pvztoolkit 厌倦了植物大战僵尸中阳光不足的困扰?想要解锁游戏的全部潜力却不知…

作者头像 李华
网站建设 2026/6/29 5:55:13

RVC-WebUI语音克隆架构解析:从检索式转换到生产部署实战

RVC-WebUI语音克隆架构解析:从检索式转换到生产部署实战 【免费下载链接】rvc-webui liujing04/Retrieval-based-Voice-Conversion-WebUI reconstruction project 项目地址: https://gitcode.com/gh_mirrors/rv/rvc-webui RVC-WebUI是一款基于检索式语音转换…

作者头像 李华
网站建设 2026/6/29 5:44:13

AI Agent Runtime 的操作系统时刻:Session 事件日志与三层抽象

1. 这不是新赛道,是 runtime 层的“操作系统时刻”来了你有没有试过让一个 AI 代理连续工作四十分钟,做一套跨系统、多步骤的数据拉取和分析?我去年就干过。当时用的是自建架构,所有中间状态——工具调用结果、用户反馈、临时生成…

作者头像 李华
网站建设 2026/6/29 5:38:45

深入解析VH6501(二) —— Sequences类实战:从电平干扰到报文注入

1. VH6501 Sequences类实战入门 第一次接触VH6501的Sequences类时,我也被那些专业术语搞得一头雾水。但经过几个项目的实战后,我发现它其实就是个"总线魔术师"——能随心所欲地控制CAN总线上的电平变化。想象一下,你手里拿着一个能…

作者头像 李华
网站建设 2026/6/29 5:35:06

怎样轻松定制Office界面:提高办公效率的实用方法

怎样轻松定制Office界面:提高办公效率的实用方法 【免费下载链接】office-ribbonx-editor An overhauled fork of the original Custom UI Editor for Microsoft Office, built with WPF 项目地址: https://gitcode.com/gh_mirrors/of/office-ribbonx-editor …

作者头像 李华