如何使用GPT开发谷歌截图插件:一名小白的AI编程经历

释放双眼,带上耳机,听听看~!
通过GPT,即使不懂编程的人也能开发谷歌截图插件。本文分享了一名小白使用GPT开发谷歌截图插件的经历,以及解决报错和调试的过程。

大家好,我是伍六七。

AI 时代,领编程基础的小白也能通过 AI 开发出来一些简单好用的小工具。

阿七今天就带大家纯使用 GPT,「开发」出自己的一款谷歌浏览器截图组件!

直接问 GPT 我们要干嘛。

我想要制作一款谷歌截图插件,生成相关代码,自我重复审核代码正确性,确保插件能够正常运行。给出完整代码。

如何使用GPT开发谷歌截图插件:一名小白的AI编程经历

根据 GPT 返回,先创建一个 Google ScreenShot Extension 的文件夹,然后创建三个文件,分别是:manifest.json、popup.html、popup.js。

然后把 GPT 回复的文件内容分别复制粘贴到文件中。

如何使用GPT开发谷歌截图插件:一名小白的AI编程经历

保存好文件内容之后,打开谷歌浏览器路径:右上角三个点-> 管理扩展程序 -> 扩展程序,选择「加载已解压的扩展程序」

如何使用GPT开发谷歌截图插件:一名小白的AI编程经历

发现报错了。

如何使用GPT开发谷歌截图插件:一名小白的AI编程经历

我们把报错信息扔给 GPT。

manifest.json 格式有问题,检查发现,我的文件根本没放内容(抽自己)。我们重新把 GPT 输出的内容放入 manifest.json 文件。

再次导入插件,这次成功了!

但是我在点击插件按钮 Task Screenshot 的时候没有反应,我们把问题扔给 GPT。

好,这会导入插件成功。但是我在使用的时候,点击 Take Screenshot 没有反应。
请解释原因,并给出解决方案

如何使用GPT开发谷歌截图插件:一名小白的AI编程经历

我排查了前面三个原因都没有问题,最后 GPT 还告诉我们可以检查浏览器的开发者工具控制台。

怎么打开控制台?右键扩展程序,选择 「审核弹出内容」,发现报错信息,发给 GPT

如何使用GPT开发谷歌截图插件:一名小白的AI编程经历

我发现控制台报错信息:Uncaught TypeError: Cannot read properties of null (reading ‘addEventListener’)
at popup.js:1:44
请解决这个报错

如何使用GPT开发谷歌截图插件:一名小白的AI编程经历

我们把 GPT 修改后的代码,复制到 popup.js 文件中,然后删除谷歌插件,之后重新导入。

这会可以了,我们点击插件,如果列表中没有,点击下方截图最右侧的扩展程序,能打开所有的扩展程序。

如何使用GPT开发谷歌截图插件:一名小白的AI编程经历

我们点击 Take Screenshot 按钮,就可以把当前 tab 截成图。

如何使用GPT开发谷歌截图插件:一名小白的AI编程经历

给自己鼓个掌吧

有个 GPT,不会代码的人,也能做出自己的小产品!

扫描下面二维码,加我好友,回复「技术交流群」免费进群,一起学习 AI 编程,还可以免费领取 Java 面试资料。

链接我

本网站的内容主要来自互联网上的各种资源,仅供参考和信息分享之用,不代表本网站拥有相关版权或知识产权。如您认为内容侵犯您的权益,请联系我们,我们将尽快采取行动,包括删除或更正。
AI教程

持续创作,加速成长!参与掘金日新计划的第22天

2023-11-30 12:35:14

AI教程

如何在图像中找到特征并进行拼接

2023-11-30 12:42:14

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索