通过ChatGPT编程上线第一个Chrome插件,实现保存ChatGPT对话记录和网页汇集管理等功能,附ChatGPT编程思路

这是一个纯粹由ChatGPT编写出来的插件,我不需要编写一行代码,完全通过与ChatGPT对话,从最简单地获取当前网页的html内容开始,再到把代码保存到TXT文件,然后保存前对获取的html内容做处理和优化,再到保存为html文件、PDF文件和PNG图片,最后再修改成18种语言版本,一步步地完成整个插件的功能。开发这个插件第一版本的十几天时间里,其中不乏我和ChatGPT每天长达8到10小时的悉心陪伴和促膝长谈,中间遇到了许多困难和相互不理解的地方,但最终都在我的引导调试和ChatGPT不厌其烦的配合下一个个突破。

大家好,我是易焘,一位懂一点编程但并不擅长编程的开发者。在ChatGPT的帮助下,我用了不到2周的时间,上线了一个过去自己三五个月也未必开发得出来的Chrome插件,并在随后短时间内更新了5个版本。目前插件在没怎么推广的情况下,积累了1000左右的用户。

【插件地址】

【开发过程】

这是一个纯粹由ChatGPT编写出来的插件,我不需要编写一行代码,完全通过与ChatGPT对话,从最简单地获取当前网页的html内容开始,再到把代码保存到TXT文件,然后保存前对获取的html内容做处理和优化,再到保存为html文件、PDF文件和PNG图片,最后再修改成18种语言版本,一步步地完成整个插件的功能。开发这个插件第一版本的十几天时间里,其中不乏我和ChatGPT每天长达8到10小时的悉心陪伴和促膝长谈,中间遇到了许多困难和相互不理解的地方,但最终都在我的引导调试和ChatGPT不厌其烦的配合下一个个突破。

【开发缘由】

想解决自己和身边朋友的一个需求:当时 ChatGPT 封号很严重,我们希望能以更好的方式把 ChatGPT 聊天记录保存下来。这个插件能帮助大家一键把自己的ChatGPT调教记录保存在自己的电脑中,账号是不值钱的,但大家和ChatGPT的调教记录和创意灵感却是无价的。

【已迭代版本】

1.0.0 版:实现把 ChatGPT 对话记录以 HTML、TXT、PNG 和 PDF 多种文件格式保存到电脑本地,不需要分享或者保存在线上而担心对话记录泄露,同时,还让 ChatGPT 实现一个 WordPress 插件 API ,使得 Chrome 插件加载 WordPress 远程站点的指定的文章或推送的信息。

1.1.0 版:增加对 ChatGPT 对话链接的管理,通过分组、拖拽、编辑、删除等功能实现对 ChatGPT 对话链接在插件页面以多种展示方式进行分组管理,并支持分组展示方式的设置和对分组链接的导入导出。

1.2.0 版:增加把 Bard、Claude 和 HuggingChat 对话记录以 HTML、TXT、PNG 和 PDF 多种文件格式保存到电脑本地。

1.3.0 版:增加把公众号、知识星球、知乎和WordPress框架网站的文章以 HTML、TXT和 PDF 多种文件格式保存到电脑本地,为下一个版本实现汇集管理网页和对话链接做铺垫。还可以通过选项页面自定义其它网站的域名、标题和内容,实现其它网页的内容保存 HTML、TXT和 PDF 文件。

1.4.0 版:实现保存当前网页到网页管理页面中或汇集浏览器当前窗口的所有页面到网页管理页面中,并实现灵活拖拽移动、添加、编辑、删除、锁定和恢复打开等功能;选项页面中支持设置网页管理页面的显示方式,有自上而下和瀑布流两种显示方式,并且可以设置按1列、2列、3列或4列来管理网页分组;还实现对网页管理页面中的网页分组及链接的导入和导出功能。

1.5.0 版:增加把Claude官网页面对话记录以 HTML、TXT、PNG 和 PDF 多种文件格式保存到电脑本地,同时,完善保存ChatGPT对话记录功能,使得支持Custom Instructions的预定义指令一同保存在对话记录中。

通过ChatGPT编程上线第一个Chrome插件,实现保存ChatGPT对话记录和网页汇集管理等功能,附ChatGPT编程思路
插件页面
通过ChatGPT编程上线第一个Chrome插件,实现保存ChatGPT对话记录和网页汇集管理等功能,附ChatGPT编程思路
汇集管理网页
通过ChatGPT编程上线第一个Chrome插件,实现保存ChatGPT对话记录和网页汇集管理等功能,附ChatGPT编程思路
导入和导出网页分组及链接
通过ChatGPT编程上线第一个Chrome插件,实现保存ChatGPT对话记录和网页汇集管理等功能,附ChatGPT编程思路
设置显示方式和自定义网站

【下一步计划】

1、增加把对话记录和网页内容保存到Notion、印象笔记和WordPress网站的功能(保存到飞书似乎没有相关接口,待进一步确认);

2、进一步优化汇集网页和管理网页的功能,尤其是使用体验上还需要进一步向Onetab插件学习;

3、考虑把保存的网页内容做进一步处理和优化,包括但不限于对接Openai接口对内容做总结和完善等。

ChatGPT编程思路】

分步输出:让 ChatGPT 按照步骤分文件或模块编写代码,如先确定需求的各个文件,然后让 ChatGPT 针对每个文件单独输出代码,这样做可以减少上下文逻辑偏差的风险。

小步切入:项目的入口应该尽量小,小到 ChatGPT 可以输出一个完整而有用的初始版本。即使初始版本存在问题,由于代码量和功能点较少,便于 ChatGPT 或人工进行修正。

最小模块:将需修改或增加的功能代码剥离出来,每次只给 ChatGPT 最小量的代码,以减少逻辑偏差的可能性。

代码确认:在增加新功能或逻辑之前,应重新起对话窗口,将项目需求和相关代码重新输入给 ChatGPT 进行确认,以确保无误,再在进行新功能的开发。

指定代码:在ChatGPT编写代码的过程中,如果发现ChatGPT因为上下文记忆限制出现代码偏差,应把相关代码重新发给ChatGPT,并让它在当前最新代码基础上做修改。

深度引导:当多次对话无法解决问题时,应深入到具体的功能需求和代码中,根据自己的经验对 ChatGPT 进行必要的引导。

自检问题:若多次对话后问题仍未解决,可引导 ChatGPT 在代码中添加 Console 日志进行调试,再将程序运行结果或错误信息直接提供给 ChatGPT 进行检查和修正。

适时回退:若多次对话后问题仍未解决,可考虑回退到之前正常版本的对话处,让ChatGPT重新开发,重新开发时可根据之前调试过程中遇到的问题或我们的经验对ChatGPT做必要的引导。

编程新手怎样玩转ChatGPT编程

未来无限遐想,我们和ChatGPT一起创造!欢迎收看易焘的《编程新手怎样玩转ChatGPT编程》。

(0)
上一篇 2023年10月15日 17:50:56
下一篇 2023年11月7日 15:26:50

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注