设计师编写代码: 使用聊天GPT开发Chrome扩展。

以下是我编写的一个扩展程序的冒险经历,它可以突出显示在俄罗斯仍在运营并赞助对乌克兰的全面入侵的公司。

ChatGPT中文站

为什么?一个被编码包装的使命

假设编码的能力带给了设计师新的力量。今天,我想分享一个实现的创意,一个设计明确目标的 Google Chrome 浏览器扩展:突出那些在俄罗斯仍在运营并资助乌克兰战争的公司。这不是一件轻松的事情。我们经历了一段曲折的旅程,需要了解 Chrome 扩展的内部机制,研究一长串的公司名单,通过干净友好的界面与用户进行交互。是的,我们遇到了障碍。但是,一路上的每个弯路和错误都是实现最终目标的阶梯。

如何做到:一步一个脚印地走向成功。

这个项目的诞生发生在一个相对简单的步骤——为我的Chrome扩展 laying out文件结构。有了这个基本框架,我的旅程真正开始了。我毫不保留地投入了无数个小时来进行调试和错误修复,有着Visual Studio Code作为我在这个技术之旅中的可靠搭档。

ChatGPT中文站
The initial task looked like this. I’ve decided to move away from having light and dark themes.
ChatGPT中文站
The outlined file structure!

导航代码错误常常是令人畏惧的,尤其是对于不熟练的开发人员来说。对我来说,情况确实如此。当我进入创造这个Chrome扩展的过程中,我遇到了许多我无法理解的编码错误。我决定利用Chat GPT的AI力量,而不是绝望。我将复杂的错误日志输入到模型中,通过一系列迭代,解决了每一个问题。这就像有一位经验丰富的编码导师在我身旁,愿意耐心地工作,直到每个错误都被解决和修正。这种经历不仅简化了我的调试过程,而且突显出AI对于使复杂任务更容易接近的巨大潜力。

ChatGPT中文站
At some point, he started hallucinating and making up some crap. I got angry :)

我的下一个障碍要复杂得多。它涉及编制一个包括俄罗斯仍在运营的公司的全面列表。我开始带着很高的期望去寻找,发现了一个丰富的资源——耶鲁大学的列表,包括1000多家公司。起初,我有些天真地认为我可以直接从URL中获取这个列表。然而,现实很快让我意识到,受到跨源资源共享(CORS)限制,我需要一个新的计划。

这时候,我决定挽起袖子,亲自动手。我将列表复制到Excel文件中,然后请求GPT将这个原始数据转换成我的扩展程序可利用的格式。我需要一个网络解决方案,比GPT一开始建议的node.js简单得多。经过一段时间的交流,我得到了一种解决方案,将我新编译的公司列表从Excel文件中转换成可管理的JSON格式。

ChatGPT中文站
The web solution prompt
ChatGPT中文站
My JSON converter looks like this

但是,当然,旅程并没有在那里结束。我回到了我的调试工作中,花了几个小时来修复错误,并确保成百上千家公司得到正确的突出显示。这个扩展程序还远远不完美,一些公司仍然会漏网而过,但它离我的愿景又近了一步。

ChatGPT中文站
Some companies slipped through my “firewall”

接下来,我开始创建一个用户友好的弹出窗口来完善扩展程序,包括有帮助的链接和说明。经过细致的检查和测试,我有了一个能够运行的扩展程序,至少在本地是这样的。

ChatGPT中文站
I admit, my UI needs some additional work. Maybe in 1.1 version

当我准备迎来盛大的结局——在Chrome网络商店上发布我的扩展——我向GPT请求了一张路线图。由于2021年时GPT的知识有限,manifest文件存在一些问题。因此,我不得不升级到最新的3.0版本。此外,我的扩展需要比实际需要更多的权限。

这是一个耗费近一周时间的疲惫过程,但每一秒都是值得的。

更大的图像:主要带走的东西

最后,它正式上线了。对每个人都可用。虽然我的旅程经历了许多挑战,但真正重要的是这个过程:

  • 实现这一点非常重要,特别是考虑到我不是开发人员;
  • 我犯了几个错误,我从中学到了东西;
  • 我在开始学习提示工程和插件还不可用之前开发了这个扩展。
  • 发布扩展程序所需的时间是开发的5倍。
  • 最重要的是,Chat GPT 是一个难以置信的解决方案,将编码和产品创建带给了每个人。 (我也用 GPT 写了这篇文章)。
ChatGPT中文站
10 min work with generative AI

2023-10-20 16:54:30 AI中文站翻译自原文