如何用AI写一个浏览器插件？b站文章一键删插图插件实战
大家好，我是彪哥。
今天教大家如何去用AI写一个浏览器插件。
1.明确需求
这步是最重要的一步，就是你如果你自己都不知道自己的需求是什么，
那AI写出来的就没确定性了，后面改来改去很麻烦，而且很浪费精力。。
交代一下我的需求，我写文章希望多平台同步，
当我把我的这个MD格式的文章上传到B站这个平台，
发现图片根本上传不了，
原因有可能是，我的这个图床它不支持，要不然就是说我的这个图片的格式它不支持。
但是这都需要我去改我的这个文章，我不希望改，它只是我的一个分发平台。
我不希望我的文章为了这个平台做任何的改变。说白了这篇文章没有图片也无所谓，我只是想发布罢了。
但是这个时候因为它报错，这个时候没法发布。
所以我们需要把这个所有的错误图片报错的错误删掉之后再发布，应该就可以了。
我的需求就是写一个浏览器插件，
当我切换到哔哩哔哩这个写文章页面的时候，它会显示一个悬浮按钮，
然后我点击一下，就可以把这个所有的图片错误删掉。
我们打开浏览器开发者编辑器，对这个网页结构有一个大概的认识。
2.选对工具
我这里用的是vscode,其实别的这个AI IDE也是类似的。比如cursor,claude code等。
打开ide
把提示词发给ide
帮我写一个浏览器插件，在这个https://member.bilibili.com/platform/upload/text/new-edit网站显示一个悬浮窗，
当我点击时，删掉所有class="eva3-enhanced-image-wrapper" 的div元素
点击保留，准备按照说明测试
3.插件测试
打开浏览器，点击管理扩展程序
点击加载已解压的扩展程序
选择刚才我们开发的插件
回到b站上传文章测试效果，有按钮，
我们点击测试一下，
发现无效
让ai再改一份
为啥提示没找到元素啊 我打开f12看了是有的
更新一下
再次测试
成功删除
但是文章还是无法上传
直接复制html问ai,
提示词
复制的html+
那我把那个错误图片删掉之后，它还是提示我这个有图片异常啊，我把那个那个元素给删掉了。
又改了一份，刷新一下，测试
测试
删除成功
成功上传
至此，目标实现。
4.总结
这次其实就是用AI写了个简单的浏览器插件，帮我发文章的时候一键删掉报错图片，中间踩了点坑，
比如页面是动态加载、删了DOM但状态还在，最后通过不断把真实页面结构丢给AI去改，问题就解决了。
本质上不是代码多难，而是你要把问题说清楚、把现场信息给够，AI才能帮你干活。
感谢各位朋友捧场！要是觉得内容有有点意思，别客气，点赞、在看、转发，直接安排上！
想以后第一时间看着咱的文章，别忘了点个星标⭐，别到时候找不着了。
行了，今儿就到这儿。
论成败，人生豪迈，我们下期再见！
886
