作者以编程新手身份，利用ChatGPT 3.5和GPT-4在10天内完全通过对话开发出一款Chrome插件，实现保存对话记录、下载图片、抓取网页数据等功能，累计获得3500名用户。本文分享了AI编程的完整过程、核心思路（分步迭代、做小项目）以及插件主要功能，适合对零代码开发、出海产品感兴趣的读者。插件免费使用，无需写代码。
Tags:
如果把时间倒回3年前，我还是一个写不出几行复杂代码的编程新手。但就是靠着和ChatGPT死磕了10天，我竟然折腾出了一款有3500人使用的Chrome插件。
ChatGPT 3.5问世没多久之后，我就开始使用GPT3.5尝试做编程，测试了一个非常简单的功能，开发一个给文章添加一个“New”标签的WordPress插件。结果它真做出来了，功能虽然简单，但在当时却让我惊讶不已，我从此一发不可收拾，走上了AI编程之路，一直持续至今。
随后，我开始尝试用ChatGPT编写一些更复杂的功能，然而，受限于GPT 3.5的能力和上下文记忆，我开始遇到一些问题，进展十分缓慢。但在摸索过程中，我逐步形成了当时最初始的两个AI编程思路：
想办法把项目做小，再逐步迭代；
让ChatGPT分步骤输出。
紧接着，ChatGPT发布了GPT4，我于是尝试使用GPT4解决前面遇到的问题。结果只用了10分钟，GPT4就帮我编写出一个简易的汇集浏览器网页的Chrome插件。这让我兴奋不已，于是在朋友圈发了一条信息：
而这个汇集浏览器网页的Chrome插件，正是我后面开发的第一个出海产品中的功能的一部分。
|
|
|
就在当时，ChatGPT开始大规模封号，我和身边一些朋友都中招了。想着我和ChatGPT一起并肩作战编写代码的记录再也无法找回，我于是萌生了一个念头：开发一个保存ChatGPT对话记录的Chrome插件。
经过十几天奋战，终于开发并上线我的第一个出海产品，实现把ChatGPT对话记录以HTML、TXT、PNG和PDF多种文件格式保存到电脑本地，不需要分享或者保存在线上而担心对话记录泄露，同时，还让ChatGPT实现一个WordPress插件API给Chrome插件加载远程站点的指定的文章列表。
随后，我在生财发布了文章，这是我自2020年6月18日加入生财将近3年后，发布的第一篇文章：
文中，我提到一段：
这是一个纯粹由ChatGPT编写出来的插件，我不需要写一行代码，完全通过与ChatGPT对话，从最简单地获取当前网页的html内容开始，再到把代码保存到TXT文件，然后保存前对获取的html内容做处理和优化，再到保存为html文件、PDF文件和PNG图片，最后再修改成多语言版本，一步步地完成整个插件的功能，开发这个插件的十几天时间里，其中不乏我和ChatGPT每天长达8到10小时的悉心陪伴和促膝长谈，中间遇到了许多困难和相互不理解的地方，但最终都在我的引导调试和ChatGPT不厌其烦的配合下一个个突破。
可见当时的我对AI编程有多么痴迷和投入。我还在文中提及我在使用ChatGPT编程的实践过程中总结出来的4个AI编程思路，现在看来，这些思路着实不值一提，但在那时却引起了生财有术官方工作人员的注意，邀请我在当时的英文工具站航海做了一次分享：
分享之后，有很多圈友也对ChatGPT编程感到震撼，不少还加我好友沟通交流。随后，我把分享稿整理成一篇文章发布到生财有术：
工具站新手通过ChatGPT编写和上线工具站产品的实操分享 https://t.zsxq.com/1f1pD
获得我在生财有术的第一篇精华，还拿到了一颗龙珠，于是有了每年生财都给我分红的不解之缘。
为了争取更多用户，我开始给插件增加导出Claude、Gemini、Hugging Face对话记录的功能，插件用户数也很快增加到将近1000。接下来很长的一段时间，我都围绕这个插件让ChatGPT做了很多迭代和优化：为了满足用户快速打开ChatGPT对话的链接，增加了前面提到的汇集网页的功能；为了趁GPTs的流量，增加了GPTs推荐和搜索功能；为了满足用户下载图片的需求，增加了图片下载功能；为了满足用户抓取数据的需求，增加了爬取网页数据和自动化功能...
那时Cursor还没横行天下，我靠着和ChatGPT对话，一步一步地复制粘贴，就这样无脑地增加功能。现在这个插件的功能已经变得越来越臃肿，相比只有保存ChatGPT对话记录的早期版本，插件早已变得面目全非。所幸，这个插件趁了早期ChatGPT和GPTs的流量，再加上生财圈友的加持，用户数竟然缓慢攀升到3500左右。
今天我重新把这个插件拿出来，给你简单介绍其中最主要的几个功能：
功能一：保存网页内容
首先是保存网页内容。插件最初的目的是为了保存ChatGPT对话记录，因此这个功能仍然是这个插件最主要的功能。早期的版本不仅实现了ChatGPT对话记录，还实现对页面一些元素细节做特别处理，比如删除侧边栏、输入框和一些不必要的按钮，使得保存的页面尽可能干净简洁，再比如复制代码的功能等等，然而，ChatGPT官方的页面在不断改版和变化，有时某些改动会造成我的插件保存对话时某些特别处理不再有效，但目前仍然可以较为完好地重现ChatGPT对话的内容，还可以保存其它各种网页页面的内容。
|
|
|
功能二：下载网页图片
接着是保存网页图片。这个功能是模仿Image Downloader开发的，但进一步根据网页结构对图片进行分组，方便用户按分组下载图片，比如下载产品主图，或者下载产品详情图。
功能三：抓取网页数据
再者是抓取网页数据。这个功能在当时耗费了我很多时间，为了构建识别列表项的规则，我做了许多尝试，结果仍然没有达到我预期的效果。但目前已经实现对很多页面中的列表内容进行抓取，还可以设置规则进行简单的自动化。
功能四：汇集管理网页
最后是汇集管理网页。这个功能是我自己目前每天都在使用的功能，是模仿OneTab开发的，也是前面提到通过ChatGPT编写出来的第一个产品的功能，但我根据自己的需求做了许多优化，实现浏览器网页标签一键汇集或一键打开，还实现对汇集的网页进行分组和分页管理，还能灵活复制、剪切、拖拽移动等。
从做出海产品的角度，这个插件不算一个成功的产品，目前为止仍然在为爱发电，没有任何变现，产品略显复杂，很多功能更多是为了满足我自己的想法和需求。
但是，它是这个AI大航海时代普通人的一个缩影——它证明了，只要你有想法，AI就能帮你跨越技术的鸿沟，把脑海中的点子变成现实。
我也确实是这个插件的忠实用户，每天都一定会打开它，主要是使用当中的网页汇集和管理功能，而我身边也仍然有朋友一直在使用它，主要是用来保存ChatGPT的对话记录。如果这个插件有一个或两个功能刚好契合你的需求，欢迎你不要犹豫、果断安装使用，也欢迎你给我提出你的宝贵意见。
插件链接：https://chrome.google.com/webstore/detail/ocejkjkjbhbkgdidjhodiejdppbiahna
没有评论:
发表评论