大家好，我是彪哥。

今天教大家如何去用AI写一个浏览器插件。

1.明确需求

这步是最重要的一步，就是你如果你自己都不知道自己的需求是什么，

那AI写出来的就没确定性了，后面改来改去很麻烦，而且很浪费精力。。

交代一下我的需求，我写文章希望多平台同步，

当我把我的这个MD格式的文章上传到B站这个平台，

发现图片根本上传不了，

原因有可能是，我的这个图床它不支持，要不然就是说我的这个图片的格式它不支持。

但是这都需要我去改我的这个文章，我不希望改，它只是我的一个分发平台。

我不希望我的文章为了这个平台做任何的改变。说白了这篇文章没有图片也无所谓，我只是想发布罢了。

但是这个时候因为它报错，这个时候没法发布。

所以我们需要把这个所有的错误图片报错的错误删掉之后再发布，应该就可以了。

我的需求就是写一个浏览器插件，

当我切换到哔哩哔哩这个写文章页面的时候，它会显示一个悬浮按钮，

然后我点击一下，就可以把这个所有的图片错误删掉。

我们打开浏览器开发者编辑器，对这个网页结构有一个大概的认识。

2.选对工具

我这里用的是vscode,其实别的这个AI IDE也是类似的。比如cursor,claude code等。

打开ide

把提示词发给ide

123帮我写一个浏览器插件，在这个https://member.bilibili.com/platform/upload/text/new-edit网站显示一个悬浮窗，当我点击时，删掉所有class="eva3-enhanced-image-wrapper"的div元素

点击保留，准备按照说明测试

3.插件测试

打开浏览器，点击管理扩展程序

点击加载已解压的扩展程序

选择刚才我们开发的插件

回到b站上传文章测试效果，有按钮，

我们点击测试一下，

发现无效

让ai再改一份

4为啥提示没找到元素啊我打开f12看了是有的

更新一下

再次测试

成功删除

但是文章还是无法上传

直接复制html问ai,

提示词

567复制的html+那我把那个错误图片删掉之后，它还是提示我这个有图片异常啊，我把那个那个元素给删掉了。

又改了一份，刷新一下，测试

测试

删除成功

成功上传

至此，目标实现。

4.总结

这次其实就是用AI写了个简单的浏览器插件，帮我发文章的时候一键删掉报错图片，中间踩了点坑，

比如页面是动态加载、删了DOM但状态还在，最后通过不断把真实页面结构丢给AI去改，问题就解决了。

本质上不是代码多难，而是你要把问题说清楚、把现场信息给够，AI才能帮你干活。

感谢各位朋友捧场！要是觉得内容有有点意思，别客气，点赞、在看、转发，直接安排上！

想以后第一时间看着咱的文章，别忘了点个星标⭐，别到时候找不着了。

行了，今儿就到这儿。

论成败，人生豪迈，我们下期再见！

886