我是个失业的产品经理,我写了一个 Chrome 扩展

187 天前
 jason5ng32

TLDR

在 ChatGPT 和 Github Copilot 的帮助下,我写了一个 Chrome 主题扩展:

主要实现 2 个功能:

  1. 将 macOS 非常漂亮的航拍屏保视频,变成 Chrome 的启动页
  2. 在启动页的搜索框输文字后,直接跳转到 ChatGPT 并开始对话
  3. 附加了一些装饰:随机格言、天气预报、当前时间等

体验与吐槽地址: https://chrome.google.com/webstore/detail/macify-macos-screensaver/lgdipcalomggcjkohjhkhkbcpgladnoe

正文

没上班没在大公司卷已经整整一年了,这件事正好发生在我 35 岁的时候,正好命中了「互联网人 35 岁就失业」的预言,失业之前,我是某上市公司的部门负责人。

然而,好汉不提当年勇(傻)了。想借着我这扩展,分享一下我使用 ChatGPT 写代码的感受。

故事是这样的。

最早的需求来源是我自己,我觉得 Apple TV 的航拍屏保视频很好看,后来我发现 macOS 里也有。然而,作为失业经常在家里发呆的人,电脑出现屏保的概率是很低的,而我又很想看这些漂亮的屏保,于是就想:能不能把这些屏保变成 Chrome 的启动页。毕竟,浏览器是我最常用的软件。

在找了一堆扩展都无法实现我的需求后,我把目光投向了万能的 ChatGPT 。它告诉我,如果要实现这个需求,得做两件事:

  1. 写一个扩展,占领 Chrome 的启动页,并在视图里播放视频
  2. 把视频的 http 地址找出来,才能给你播放,Chrome 有安全限制,读取本地文件会受限

然后我就想,咦,macOS 不是自带 Apache 么,将屏保视频所在的目录映射成 HTTP 服务不就可以了吗?

于是,在大概和 ChatGPT 聊了 30 个回合后,第一版就完成了。

后来我就想,既然都写了第一版了,反正我现在没啥事干,要不再加点功能吧,毕竟已经没在公司上班,需求不用过评审会,我就是唯一的用户,不用找数据分析师分析,也不用跟老板交代抓手是什么,我,自己说了算。

陆陆续续搞了差不多一周时间,加了一些我自己需要的功能。

然后我找了一个写前端的朋友,在我威迫利诱之下,他安装并进行测试,然后跟我说,「你让别人在本地部署 Apache ,这是多看得起别人的技术水平啊?」

我觉得这个用户的反馈是合理的,他是我当时唯一的外部用户,也就是说,外部用户 100% 表示不希望自己搭建 HTTP 服务。作为产品经理兼数据分析师的我,一下子就得出了这个结论。

于是,我就想能不能找到屏保视频的苹果官方下载地址……还真找到了。但是,遇到了一个严重的问题,这些视频所用的域名,在主流的操作系统,是不受信任的(除了苹果系的 Safari 浏览器),作为一个因爱好而写的扩展,也不可能自己花钱买个代理给潜在用户使用。于是我就问 ChatGPT ,应该怎么解,它说:你可以和苹果联系。

啊,此时 ChatGPT 表现得特别像我在开评审会时遇到的,开会时就在打字,被 cue 时一脸懵逼的同事。

思考许久之后,我想起来了 Cloudflare 这家良心公司,有一个叫 Cloudflare Worker 的产品,这个产品只限制请求数量,不限制流量。我心想,如果 CF 对苹果的根证书是信任的,是否可以通过 CF Worker 进行流量转发,从而规避浏览器对苹果证书不信任的问题?测试后发现,果真如此。虽然,这样使用可能有滥用的嫌疑。

所以,最后我提供了 3 种视频源的方案:本地搭建、苹果服务器、CF 反向代理。

当我让 ChatGPT 把相关代码写完之后,我这位资深前端朋友又跟我说,「你的代码需要重构一下」,我想,这难道就是大公司里常说的,用户看不见你做了什么,你却说你做了大量更新,背后的原理?

「不,你最好保持主程序的简单和简洁,然后通过多个子程序来完成你的需求,这样便于维护」

哦,我觉得他说得对。然后我差不多花了半天的时间,又和 ChatGPT 聊了 30 个回合,把代码做了一些规整。

最后我想,要不,我直接把扩展放到 Chrome 的商店里吧,虽然写这个扩展最早是为了满足自己的需求,后来更多的是在学习,不过发布到商店还是有一些成就感的。然后就发布了。

在发布时,我发现,我还需要一个图标,还需要产品介绍。好家伙,都用 ChatGPT 搞定了,不用再等设计组的组长排需求了。

搞定,收工。

感受

与其说我在写代码,倒不如说我的大部分时间还是在当产品经理这个角色,给我的程序员兼设计师兼翻译 ChatGPT ,提需求。

我最早玩 WordPress 的时候,自学了一丁点的 PHP 和 CSS2 ,JS 处在只看得懂 getElementById() 的水平。所以,最终的代码里,应该说有 70%-80% 的代码是 ChatGPT 写的。我手敲的代码仅在 CSS 、主函数和默认参数,以及注释这些小事上面。

在这个过程中,有这些感受:

  1. 20 刀一个月的 ChatGPT 和一年 100 刀的 Github Copilot ,物超所值。
  2. 在功能思路,不要指望 ChatGPT 能帮上大忙,得自己来。自己都想不清楚,还找程序员写代码,当什么产品经理啊。
  3. CSS 基本上也得自己来,但可以让它按照你的要求先给基础代码。毕竟,样貌比逻辑难以用文字描述。
  4. 一定要先想好主程序的结构,然后让它帮你写子程序,它擅长单任务,一旦你给的需求多了,就乱套了。想好主程序,就成功了一半。
  5. 如果完全没有代码基础,可能没法很好地使用 ChatGPT 写代码,可能至少得看得懂,因为它只管帮你到达目的地,不管用什么交通工具。
  6. 需求必须要很明确,具体到每个细节,就像在大公司里产品经理和程序员沟通那样,不能模棱两可,你嘴里说要个圆形,你心里想的是月亮,但对方可能给你中式炒锅。
  7. 产品经理还是要多折腾,多搞搞技术,自己玩玩服务器啊代码啥的,后端说把接口写好了,你连个 Postman 都不会用,却只会做晋级 PPT ,这事,嗯,也经常发生。

资源

谢谢看到这里的各位大佬。

5442 次点击
所在节点    分享创造
39 条回复
darkengine
187 天前
Chrome 的启动页是我停留时间最短的一个页面 。。。
dofy
187 天前
好看! 已 star ,GitHub Copilot 现在也超好用。
chuck1in
187 天前
某上市公司的部门负责人
这个也能失业的吗,这么高的 title
ruicky
187 天前
edge 有上架吗?
deiphi
187 天前
看上去不错啊!
elechi
187 天前
这个产品经理真不错!
tudoubutudoupi
187 天前
厉害,产品经理现在都这么全能了吗,我们公司的产品经理也会业余搞网站,https://axurehub.com
zqjilove
187 天前
插件开发者提交的官网地址是 kenengba ,好久没看到这个网站了!!!略微怀念!
tbg
187 天前
@tudoubutudoupi 能送个 vip 吗哈哈哈
jason5ng32
187 天前
@zqjilove 泪目🥲,老朋友你好
dvbs2000
187 天前
Error fetching video directory. Please check the URL and instrutions then try again. 提示这个错误
dvbs2000
187 天前
@dvbs2000 是我没认真看提示 允许证书就可以了
dvbs2000
187 天前
非常赞~ 我的 chrome 一下子变得好高级
lykhero
187 天前
不懂技术。 问下各位大神,chrome 的插件是不是存在本地,是不是等于默认开源的啊
iOCZ
187 天前
@lykhero 有些会压缩,加密啥的
pengpengpeng
187 天前
阿禅,哈哈
bn
187 天前
竟然是阿蝉,wordpress 时代经常访问可能吧的路过
sNullp
187 天前
居然是啊蝉,我可是绿条时代的读者!
vincentqi
187 天前
是 可能吧 吗
E1n
187 天前
👍🏻

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/988213

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX