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

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

插件地址

直接访问请点击：GPTBLOX - ChatGPT Save Data/Bard Claude Saver

Chrome 应用商店搜索：GPTBLOX

开发过程

这是一个纯粹由 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 的预定义指令一同保存在对话记录中。

GPTBLOX 插件页面

汇集管理网页

导入和导出网页分组及链接

设置显示方式和自定义网站

下一步计划

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

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

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

ChatGPT 编程思路

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

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

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

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

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

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

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

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

欢迎大家安装使用，遇到任何问题请留言反馈，也请大家就这个插件接下来的开发计划和推广方案提供宝贵建议，感谢 V 友们！