不会代码,利用Claude.AI编程制作一个Chrome浏览器插件

791 阅读2分钟

前提: 我个人一点代码能力没有

需求: 制作一个Chrome浏览器插件,实现点击插件图标,下载当前浏览网页上的视频的功能。

AI工具: Claude.ai

结论: 自己一个代码没有写,全程靠AI,全过程大概3-5分钟,实现了一个Chrome浏览器插件的编码开发,功能完整,可以下载网页里url直接有mp4的视频。

过程步骤:

首先在Claude.ai提出需求: 我想创建一个Chrome extension 实现点击一下这个插件图标,能够提取当前访问网页的可以下载的视频,并直接开始下载下来,如果有多个视频可下载,则直接同时下载多个,具体分析网页视频是否可以下载或者如何下载下来可以参考使用cobalt.tools/ 这个网站,这个网站能够实现把一个网页给它,提供视频供用户下载

这里还写的语句不通顺,不过没有关系,AI都能理解你的小心思,

image.png

image.png

Claude很快给了一个简单的代码,然后我回复

进一步解释,并实现更复杂完善的视频下载功能

Claude回复如下:

进一步解释了代码内容,并给了更完善的视频解析,下载前端功能。

image.png

因为个人没有代码能力,也不知道Chrome插件应该是需要什么样的代码或者工程文件,没有关系,直接问AI,直接想让它给我代码文件,于是下面我直接问了,Claude也没让人失望,它回复虽然不能提供完整的工程文件,但是给我了所有的代码文件及源码。

image.png

image.png

根据这个提示,我手动创建了5个需要的文件,分别是:manifest.json,ackground.js,content.js,popup.html,popup.js

image.png

然后根据提示:

创建了一个文件夹,里面包含了这些文件

image.png

image.png

再然后根据提示,在浏览器里启用开发者模式,加载这个文件夹,居然加载成功了。

浏览器里出现了一个A的图标,提示的是下载功能。

image.png

然后找个有视频的网页去试试这个插件功能。

因为视频解析的原因,目前很多视频网站是一些视频流文件,不是给的直接的mp4格式,所以暂时是下载不了的,就找一些有mp4文件的场景。点击这个插件图标【A】,居然真的成功下载了2个视频文件,太牛了,高兴。功能完整OK

image.png

顺着这个思路,相信我可以轻松制作很多Chrome浏览器插件小工具了,什么下载视频,下载图片,等等工具。AI太厉害了。