Cursor开发闲鱼采集插件全过程 干货满满！

UP主: bluebubblebubble · 时长: 33:21 · 🔗 B站原视频

标签: Cursor · AI编程 · 浏览器插件 · 数据采集

浏览器插件的价值与开发准备

好兄弟们，咱们第三节课是开发浏览器的插件。这个插件属于轻应用，相当于微信小程序一样，只要安装了就可以使用一些便捷的功能，并且咱们可以同时植入自己的联系方式达到引流的目的，包括开发一些自己想要的功能。你就像我前几个月，我没有接触这个AI软件之前，我让别人开发一些插件最少都要几百块。包括咱们今天讲的这些插件，也不是我吹啊兄弟们，只要你能开发出来，它就价值几百。你不信可以把这些你想要的需求去淘宝也好，或者QQ群也好，找一些开发的人问一下，让他报一下价格你就知道了。好嘞，别的话咱们就不多说了，咱们具体就直接开始了啊。

需求分析与闲鱼同行数据定位

第一步咱们肯定要新建一个英文的文件夹，这个文件夹随便想一个名字，只要你自己知道就可以。打开咱们的AI软件，然后打开文件夹桌面找到它。咱们今天开发的是一个采集闲鱼同行数据的插件。咱们打开闲鱼先看一下，在开发任何插件或者网页之前，肯定要有一个自己的思路，把它整理好发给AI，要不然他都不知道你干什么的，怎么能开发好呢？随便点一个，咱们想要得到同行的信息，那啥是重要的信息呢？商品链接、想要的数量和价格，其他的就无所谓了。有一句话说得很好，知己知彼百战百胜，咱们先模仿同行，再去超越同行。得到这些重要的信息之后，咱们就知道他这500个品里面20个品卖得最火，咱们直接卖这20个，然后再去看其他的同行，把那些垃圾的东西筛选掉。咱们随便找一个卖虚拟资料的同行，OK就这个。

构建插件基础框架与提示词技巧

咱们在这个软件上Ctrl+I。首先要想一个文案，咱们刚才提到的采集这三个点，同时是开发浏览器插件，咱们先给它一个大概的框架。你不能上来把几百个字的要求全部发给他，那样效果并不好。就像咱们跟一个人说话一样，你上来给他发几百句话，不让人家说话，最后他可能只能记住一些重要的点。所以咱们先给了他框架之后，让他往东走，他就只能往东走了。咱们现在随机应变，输入：“帮我开发一个浏览器插件，主要是采集网页元素，并保存到数据表格中，然后可以直接下载。稍等，我会给你具体的信息。”这个意思就是先让他完善大概的框架，然后咱们再给他具体信息回车发给他。如果遇到一直在转圈没反应的情况，可能是网络问题或者软件问题，只需要点那个加号就可以了。可以看到他30秒就帮咱们整好了，框架已经具备操作界面、存储和下载的按钮。

网页元素定位与精准需求表达

下一步咱们要告诉他具体的信息。说到商品链接、价格、想要数这三个信息，在网页上点一下F12。同时我建议兄弟们用谷歌浏览器去开发插件和调试网页，它的兼容度是最好的。咱们首先要知道采集的元素在哪里，如果代码有几千行，你直接让他找标题、作者，他是不可能找到的，这就是元素的重要性。点击这个箭头框架，点一下商品的标题，它会跳转到对应的代码，双击class后面的引号，右键复制或者Ctrl+C复制。然后告诉AI：“现在帮我采集网页的这个元素，这是商品的链接。”还有想要的数量，点一下“想要”，你看它框选了整个“想要”也没有多余的部分，这个就是正确的元素，16人想要是对应的。接下来是价格，你会发现它的整数和小数整成了两个元素，一个上面一个下面。没关系，只需要把整数元素和小数元素分别发给他。这时候问题又来了，如果采集到5.88，只显示点八八，咱们也不知道是120.88还是一块八毛八，不准确。所以一定要把需求告诉他：“把整数元素和小数元素拼接在一起，存储到数据表格中，并且可以下载数据表格。”你把元素定位好发给AI，他就可以在几万行代码里直接找到。

插件安装调试与初步排错

AI的好处是你让他修改或者二开，他没有不耐烦的情况，直接帮咱们开发。咱们暂时保存一下。既然开发的是浏览器插件，咱们要去调试一下。点击浏览器右上角三个点，打开扩展程序管理，点击“加载已解压的扩展程序”，选择刚才的文件夹。这时候会发现报错“未能成功加载”，这个是图标错误的意思。让AI开发不可能百分百不出错，遇到问题解决问题就OK。我现在告诉他：“现在请把所有图片/图标移除。”等过两天我会详细教你们把插件图标改成自己的，现在只需要让他把功能完善。暂时保存一下，重新加载，这时候会发现成功了。刷新一下网页，点一下扩展程序里的插件，有一个“采集下载”按钮。点一下发现没反应，但我通过控制台发现已经采集了20条数据。咱们先下载到桌面看一下，可以看到已经正确采集到了，只是没有提醒咱们。我还忘了一个商品标题，没事，咱们让他去加就行。

增加自动下滑与标题采集功能

今天我再教兄弟们一个键，蓝色的那个键就是“彻底保存”，就是指他已经把代码成功保存到你的文件里了，你在桌面上就可以直接打开。刚才遇到什么问题呢？采集数据后没有任何提示。我告诉AI：“采集完成后没有任何提示，同时帮我加一个商品标题的采集。”咱们找一个没有“包邮”标签的商品，把标题元素发给他。整好之后暂时保存，记得把老的插件移除，加载新的，然后刷新页面。点一下开始采集，发现已经采集了20条数据。想一下思路，当你采集完本页数据后，需要自动下滑。我输入：“自动下滑，直到不能滑动为止。”为什么直到不能滑动为止呢？因为到底了之后他没有加判断，咱们直接让他通过滑动来判断。很快写好后，移除旧的，加载新的，刷新界面。点击采集，20、40……兄弟们，你看这就是AI的强大！如果让你手动采集500个同行数据，一直复制粘贴，一个小时能搞定吗？现在只需要几秒就帮我采集好了。

表格数据处理与截图修复Bug技巧

咱们看一下刚才下载的数据，商品链接、标题、数量都有了，是不是可以实时看到同行信息了？在表格里把文本转换成超链接，这时候一看，100多个人想要的商品，原来是做电商的虚拟资料，那我也可以卖。那些没人要的垃圾商品完全可以忽略。我看一下为什么会出错，发现商品标题里加了一个标点符号（逗号）导致错位。这时候咱们可以直接截图，用微信截图框选一下出错的地方，Ctrl+V粘贴到AI软件里。AI软件能识别截图，这就很强大。告诉他：“现在帮我修复，因为标题有逗号导致出错的问题。”还有刚才说的价格显示了两个点，直接截图给他：“价格元素是两个点，请让它直接显示一个点。”把Bug发给他，暂时保存，移除旧插件重新加载，刷新网页。再次采集下载，打开一看，惊讶地发现逗号问题修复了，价格也变成一个点了。遇到问题解决问题，只要表达够清楚，配合截图，大概率都能解决。

界面美化与添加悬浮窗功能

有的兄弟会问，我想植入联系方式，想美化按钮，想让它更便捷。刚才我们已经把Bug修复得很满意了，这次点击“彻底保存”，再去发布新需求，他就会在这个基础上修改。我输入：“我想全部采集完数据后自动弹出下载。”很快修复好，测试成功。接着我觉得插件有点简陋，直接截图发给AI：“帮我美化这个界面，同时在开始采集之前弹出提示：欢迎你，尊贵的项目禅。”当然你们真正开发时没必要每次都弹，可以设置三天提醒一次，不然太鸡肋了。保存刷新后，现在的确美化了按钮，提示也很丝滑。但我还有需求，每次采集都要点扩展程序太麻烦，我想让它出现在浏览器的右下角作为悬浮窗。我告诉AI：“我现在在首页没有看到插件的悬浮窗，请把它固定到右下角。”AI修改后，咱们看一下效果，悬浮窗已经出现在下面了。

完善采集进度提示与课程总结

测试时发现又出现了一个小错误：正在采集，但没有自动下载。我再加一个需求：“在浏览器中间显示当前采集的数据总数，同时下滑到无法滑动时，自动下载采集到的全部数据表格。”让他更容易理解。修改好后保存，刷新网页，点击采集。可以看到它已经同步显示采集数量了，而且完美固定在右下角。关于表格里的超链接不能直接点，这跟AI无关，只需要在表格软件里点击“转换超链接”就OK了。这个插件对于做闲鱼的人很重要，我采集十几个同行，把超过100人想要的商品拿去发布，等于站在巨人的肩膀上卖货。手动采集几千个商品要几天，用咱们自己开发的插件只需要几分钟。闲鱼插件的开发就到这里，这两天我会开发好几款插件，包括项目禅官网的其他插件都会同步更新。接下来是越来越给力的课程，兄弟们一定要跟上，看完之后去尝试做一下就OK！