从写代码到上架，设计师如何借助 AI 独立完成浏览器插件？

相关干货：

最近几个月，我陆续在即刻上看到多名非程序员朋友开始用 Cursor 搭建自己的工具和应用，心中非常羡慕。偶然之中，我又在公众号看到《AI 编程，10 小时 2 个产品，从 Claude Sonnet 到 Cursor，产品经理的天要变了！》这篇文章，开始对 AI 编程实操有了全新概念。

我开始琢磨可以怎么利用 AI 能力来制作小工具？在观察自己和身边设计师朋友的工作过程之后，我决定选择一个学习和制作成本低，但对于设计师作用不小的工具：收集素材的谷歌浏览器插件。经过一番探索，Image Collector 终于在 10 月初成功上线谷歌商店。

回看我这趟边学习边创造的的旅程，从想法到上线可以总结成五个关键步骤：

1. 决定方向，具体要实现什么产品的什么主要功能
2. 决定实现方式，用户应该怎么跟界面交互来实现功能
3. 开发代码，用代码实现功能和交互，同时处理边缘 case
4. 上架商店，根据要求把代码提交到 Chrome 的应用商店，并充实详情页
5. 宣传产品，利用不同媒介渠道推销产品吸引用户

一、决定方向

传统产品开发过程中，这个步骤需要业务和产品经理挖掘市场需求，了解竞品实现方式，研究潜在用户使用习惯 ...

如果你跟我一样是独立开发新手的话，这个步骤更重要的事情是了解自己或者身边家人朋友的真实需求。

1. 比如有哪些事情流程繁琐耗时反人类，但不得不做？（举个例子：自媒体作者想要把文章发到不同平台，TA 需要反复在不同后台完成编辑和样式调整）
2. 比如有哪些工具实用但很难时刻带在身边？（举个例子：女生晚上出门拍照需要不同颜色的补光，普通人很难天天带灯出门）
3. 比如有哪些特殊的爱好/生活方式没有足够的帮助引导？（举个例子：游客喜欢在不同城市地点收集图章，但初来乍到并不知道哪里可以集章）

然后思考哪些问题可以通过工具/产品/插件/补丁等方式快速解决。有些工具产品的运行成本很低，只要代码能写，用户马上就能用。有些产品的投入成本相对较高，需要产生内容、用户互动、形成社区，才能让功能发挥作用。作为新手，我选择了成本最低的工具产品，打算用这第一个项目把 AI 辅助独立开发的流程跑通。

以我自己的 Image Collector 为例：

我是一名设计师，身边也有很多做设计的朋友。做设计项目时，大家都需要在网上找视觉参考。但在谷歌浏览器开了几十个 Pinterest 页面后，电脑开始轰隆轰隆作响，反应速度变慢，找素材的动作变得非常的卡顿。甚至之前看到过满意的 ref 也找不到放在哪页了，设计师需要逐页重新翻看。

于是我想到“可视化收藏夹”的概念。有了这个谷歌浏览器插件，设计师可以在浏览网页时收集图片素材，也可以在二次浏览时快速找回自己满意的素材，还可以把这个素材当作锚点回到原上下文中 ... 一言蔽之，设计师可以利用这个浏览器插件让图片收集原子化 & 素材再利用更高效。

二、决定实现方式

有了第一步的大致想法之后，接下来可以调研类似功能/产品的实现方式，同时想想怎么根据自己的需求优化现有方案。

还是以我自己的 Image Collector 为例：

上一步中，基于用户的痛点，我决定要做一个可视化收藏夹来收集素材。然后我开始回顾「收集图片素材」这个功能的现有解决方案。我知道的有 3 种：

1. Pinterest / 花瓣等素材收集网站
2. 浏览器自带的收藏夹
3. Eagle 等素材管理软件

以“可视化收藏夹”为目标，Image Collector 包含「收集图片」、「图片分组」、「批量管理」等等功能。更具体地说，用户可以获得一个入口本地化的 Pinterest 或一个视觉化的浏览器收藏夹：设计师在任意网站上看到满意图片后，以图片形式加入收藏夹。同时，TA 可以清晰看到自己收藏夹内的图片预览，并进行管理。

在确定好具体要实现哪些功能后，我需要进一步细化每个功能的交互和体验。

比如最基础的「收集图片」功能，对于用户来说什么收集方式最顺手？收集完的图片该放在一个什么样的容器里？收集完的图片可以保存多长时间？收集完但又不想要该怎么处理？收集完但需要修改该怎么处理？用户看到的收集图片是什么形式？... 这些问题都需要在开发前想清楚，清晰目标能让代码开发过程更轻松。

三、开发代码

接着就是重头戏，AI 代码开发的部分。

综上所述，我基本没啥代码能力。为了零代码开发，我前后使用了 3 个工具来帮助我：

1. ChatGPT：告诉我开发一个谷歌浏览器插件的框架文档有哪些（比如 manifest.json、popup.html、popup.js ...），以及生成了第一版 demo 的代码
2. B 站：Cursor 教程视频带我入门软件安装&使用步骤，同时让我理解每个代码文档的作用（比如 manifest.json 这个文档记录的是插件的 meta 信息：版本号、说明描述、插件图标 ...）
3. Cursor：Cursor Composer 功能允许我以自然语言跟编辑器互动（比如新增功能，Debug 问题）。理论上，只要不是浏览器的硬性限制，只要我描述得够准确，Cursor 什么都能写出来

有了这些工具的帮忙，我基本只需要把大目标拆成不同的小任务，然后再把每个任务逐步细化成具体问题。通过自然语言对话，让 AI 解决我能力范围外的具体问题。

还是以我自己的 Image Collector 为例，单纯代码开发过程可以大致分为不断循环的 3 步：

1. 确定基本框架

在决定方向&实现方式的阶段，我大致确定下来自己想要做的功能。于是我直接对着 ChatGPT 描述我想要的基本功能：

它告诉了我插件的基本结构：

同时帮助我编写了 manifest.json，background.js，popup.html，popup.js 和 style.css 几个文档的初版代码。我把 ChatGPT 生成的代码，按文档结构复制到 Cursor 中，马上得到一个可以在谷歌浏览器上试用的本地代码包。

2. 细化现有功能

ChatGPT 生成的基础功能真的奏效了，我可以把 Pinterest 页面的图片添加到收藏夹画板，我也可以使用 checkbox 来勾选图片。我通过自然语言提需求，AI 就能库库写出一堆，而且代码基本能用！有种很神奇的感觉！

趁着这股兴奋劲，我开始在 Cursor Composer 窗口中继续细化产品功能：

功能代码在 Cursor 的 popup.js 文档中疯狂迭代，一些新的代码自动出现，一些旧的代码出现替换版本。而我要做的只有一件事：试一下新代码是不是可用。如果可用，就点击「Accept」按钮确认新增；如果不可用，就点击「Reject」按钮回到原版。

有些功能生成过程非常丝滑，给了我未曾设想的惊喜。比如在做「删除图片标签」功能的时候，在我未提任何需求的前提下，Cursor 自动补全了「标签删除二次确认信息」功能：用户删除当前标签时，弹窗告诉用户“如果删除这个标签，所有使用该标签的图片将会失去标签，你确认要删除吗？”。

Cursor 除了生成我指定的功能外，还能自动缝缝补补，把边缘 case 功能一并加上。用 Cursor 写代码的第一个 Aha Moment 就这样水灵灵地出现了。

3. 测试 + Debug

代码生成到一定阶段（比如写完一个新功能），我就会到谷歌浏览器上测试一下是不是好用。有的时候会比较顺利，Cursor 生成的东西马上能用。但大多数时候，谷歌浏览器会报错导致插件无法运行。更有甚者，浏览器不报错，但想要的功能就是无法实现。

当浏览器报错的时候，只要把报错内容复制到 Composer 的对话框内，Cursor 会自动修正错误，生成新的功能代码。即使出现解决一个问题再来三个问题的情况，只要耐心地跟 AI 合作，报错问题最终会被逐一解决。

不报错的问题则更为棘手。比如在开发过程，插件的「批量粘贴」功能始终不太好用。Cursor 帮助修改了好几轮之后，粘贴的要么是多张图片的名称，要么多张图片的链接，始终无法粘贴图片本身。于是我询问 ChatGPT 如何解决这个问题：

ChatGPT 给出的答案是优化 popup.js 文档中的函数，确保图像的 Blob 数据被正确获取，同时创建 ClipboardItem 将复制内容放入粘贴板并允许 Figma 识别。按照 ChatGPT 的指导，我让 Cursor 对当前代码进行优化。新增了函数确保兜底逻辑正确后，浏览器反而报错 "Failed to copy images. Please ensure you selected valid images." 。于是我继续咨询 ChatGPT：

画板里的单张图片可以鼠标直接复制粘贴到其他地方。

但是勾选后，批量复制报错"Failed to copy images. Please ensure you selected valid images."要怎么优化

跟 GPT 反复沟通了好几轮，去掉了太复杂的方法（如 Canvas 中重绘每张选中图片），最终得知 Chrome 浏览器的安全策略会限制批量复制的操作。也在网上翻了翻不同文章，看到有其他信源也这么说。为了让产品正常上线，我最后只能从产品方案层面想替代办法，暂时的解决方案是修改导出图片的逻辑：用户粘贴多张图片时，粘贴一张展示所有选中图片的大图。

想要完整地做完一个项目，上述三个步骤需要不断循环。代码开发过程中会碰到各种各样的意外，有些功能可能在一开始没有定义好，需要靠代码生成过程不断完善；有些功能在写代码的过程中发现不可行，那就得要来回推敲形成新方案；还有些功能甚至一开始并不在规划内，经过跟朋友讨论进而优化逻辑结构。多次迭代的产品开发过程才是常态。

四、上架商店过程

功能写完，测试好，打包后，下一步要做的就是上传&发布产品。根据谷歌商店官方指引，整个上架过程分为几步：

1. 注册开发者账号（需要外币信用卡 & 非大陆地址）

用户注册一个新的谷歌账号（也可以是之前已经拥有 gmail 的账号），支付谷歌一笔 $5 的注册费把这个账号升级为开发者账号。具体步骤如下：

① 在谷歌浏览器内输入网址 https://chromewebstore.google.com/category/extensions ，进入 Chrome 应用商店

② 点击右上角“更多”按钮，出现下拉菜单，选择“开发者信息中心”

③ 注册新的谷歌账号进行验证，或者验证现有的谷歌账号和密码。官方建议选一个常查看邮箱，所以我直接用了现有邮箱。（如果需要分割现有邮件和插件通知邮件，可以注册新邮件）

④ 接受所有协议和隐私政策，并支付注册费。$5 的注册费是一次性的（我当时的汇率是三十多块人民币），不会持续扣钱。

特别注意的是：谷歌不支持国内的借记卡、支付宝、微信等支付方式。如果需要支付这 $5，你需要一张可支付外币的国内信用卡。

2. 完善账号信息

完成注册后，需要进一步完善开发者的个人信息（发布者名称*、邮箱验证*、确认是否为欧盟法规的交易者*、测试账号管理、打开通知提醒 ...）。这一部分信息后面可以随时修改，按照实际情况快速填写即可。如果过程中有任何专有名词/信息不确定，可以点击页内谷歌官方的说明链接。

③ 准备插件代码包

这一步需要仔细检查代码文档是否齐全，并将所有文档压缩成 ZIP 包上传商店。

① 利用本地代码包在谷歌浏览器中进行最后一次测试，确保自己设计的所有功能都能正确实现，且浏览器没有额外报错。

② 确认 manifest.json 文档代码中包含"name"、"version"、"icons" 和 "description"几个字段，同时检查 icon 图标文件按正确路径包含在文件夹内

1. "name": 插件名称
2. "version": 当前版本号（每次上传新版本，版本号都比上一次大，所以要从小的开始，比如 "0.0.1"，或者 "1.0"）
3. "icons": 出现在浏览器右上角的插件图标
4. "description": 插件功能的简短描述，不超过 132 个字符

③ 文件包压缩成 ZIP 格式，并在后台「上传新内容」

4. 创建商品详情（需要宣传文案 & 图片）

接着就是要创建一个吸引人的商品详情页。通过说明插件的具体功能和用法，这个页面可以吸引潜在用户关注并使用工具。

商品详情页需要供给的内容主要分为两个部分：说明文字和经过排版的 banner 图片。因为自己的工作，做图非常顺手了，就没有费劲找 AI 工具来生成 banner 了。

但详情内的说明文案基本都是 AI 辅助下完成的。我先在应用商店看了不同类型收集插件的说明文案（比如 notion 和 pinterest），找到比较满意的语气和措辞方法喂给 ChatGPT。然后我用中文大概描述了这个插件的基本功能，让 AI 按我喂的案例比照着写英文宣传文案。

稍加调试，最后上线的商品详情页结果如下：

5. 解释隐私权 & 确认发布范围

最后一步就是向谷歌解释代码中必须调用涉及隐私权函数的原因，以及确定向世界上哪些国家和地区开放权限，还有是免费还是收费。

谷歌会自动读取 manifest.json 文档中使用的函数，并要求开发者向商店解释隐私权相关函数的作用。以 Image Collector 的代码为例，"storage"、"contextMenus"、"activeTab"、"tabs" 这几个隐私权函数被调用，还有 "host_permissions" 的权限是 ""（即插件要求所有网页的权限）。

我把这些需要跟谷歌解释理由的项，复制到 Cursor 的 Chat 中，询问使用函数的原因。Chat 像是一名颇具耐心的高级工程师，从原理层面有理有据地解释每个函数的具体作用。最后我要做的只是把他的回答复制粘贴到上传文本框内，依葫芦画瓢回答谷歌。

最后选择一下发布范围，就能保存草稿，然后提请审核了。我的首次申请跨了一个周末，过完周末 1-2 个工作日之后，这个插件就顺利上线了。

五、宣传产品

产品发布后，最后一步就是寻找各种渠道来宣传这个产品（如果不打算付费投流的话）。最近在听播客时，我逐渐形成一个概念：产品功能做到 60 分、70 分，甚至 80 分，当然很重要的，但再好的用户体验都无法成为产品长久的护城河，渠道和营销才是产品持续发展的关键。想想也是，互联网行业中在利基市场中抓住特殊用户痛点的小产品，大都无法抵挡大公司碾过来的车轮，因为他们的获客能力和宣传能力完全不在同一个水平。

如果想要成为更全面的独立开发者，宣传产品也是产品开发工作中必不可少的一环。以我对即刻上大大小小的独立开发者的观察，「宣传产品」可以做的事情有以下几样：

1. 建立个人品牌，持续不断生产对别人有价值的内容

① 举例｜少楠 - flomo

我对 flomo 这个产品的了解是从少楠讲卡片盒笔记法的一集播客开始的。我在他的介绍下初略地学习了更先进的知识管理方法，我开始审视自己的工作流程。然后通过产品沉思录和 flomo 的说明文档，我对这个产品和这套工作方法有了更多了解。这套工具+工作流程也逐步成为我工作生活中不可或缺的一部分。

从另一个角度讲，一个独立开发者想要推销自己的产品的话，应该要提供用户一个为什么要按该工具的逻辑来工作的理由。同时他还应该有很深的内容厚度，帮助用户迭代自己在某一个领域的认知，让用户亲手构建一个更好的自己。

② 举例｜AIchain 花生 - 小猫补光灯

小猫补光灯的花生是最近爆火的 AI 独立开发者典型。他本身是产品经理，利用 AI 开发了不少工具。在小红书上因为小猫补光灯 APP 爆火后，他开始在多个社交媒体上发帖宣传自己的项目成就。因为自发渠道内容被更多人看到，越来越多的播客和公众号也发现了他，让他连续不断地出现在更大众的节目和文章中。

除了创造产品和不断外扩的影响力涟漪，花生还在经营自己的 B 站账号，将自己开发产品的过程和方法录制成长视频，让更多人得以学习 AI 工具、AI 开发流程、AI 上架步骤和 AI 应用场景 ...

花生走出来两条路。第一条路把自己打造成一个 AI 时代的独立开发者典型，让无数想要复刻成功的人，深入了解他的方法论和路径。第二条路坚持 build in public，用 AI 编程领域的实用内容帮助大家，让后来人更轻松地复刻过程，用内容形成影响力锚点。

2. 参与行业活动，扩大业内影响力

① 参加行业 Conf

现在的独立产品圈，分散的小规模的行业 Conf 真不少：杭州良渚文化村的各种活动，海辛的 Demo Inn Shanghai，出海去孵化器的每周直播 ...

去参加活动，就能在特定领域内部认识到更多同路人，扩大朋友圈，增加外部影响力，拓展产品的推广范围。

② 投稿新产品收集站 / Newsletter / 社媒账号

1. 新产品打榜最出名的 ProductHunt，国内其实也有不少同类型的小型产品：新趣集，神器集，不死鸟 ...
2. 少数派 / medium 这种高质量文章集散地
3. 独立产品 Newsletter：Funny café 有趣产品咖啡馆，Apptisan，Figma Plugin Weekly ...

3. 拓展渠道，寻求破圈

① 小红书

小红书已经是新的百度了，年轻人对一件事不清楚，就会上小红书找别人的案例分享。小红书日活大，主要用户为年轻人，可以精准覆盖大部分独立产品的潜在用户群体。

小红书上的用户反馈非常直接，且讨论氛围好。只要产品有用，开发者可以第一时间得到用户响应&反馈，甚至是自来水传播。

iWatch 应用「StressWatch」和 iPhone 应用「小猫补光灯」就是以小红书为主要宣传路径，让更多人知道独立开发者产品。

② 小宇宙

播客逐渐成为这两年最破圈的新传媒形态，影响力扩大。往远了看，播客影响了 24 年特朗普当选美国总统。往近了看，播客逐步成为了城市年轻人生活的一部分，帮助他们了解周遭的的事物、观点和资讯。

不同于大多数 feed 流产品的短平快，动辄 40 分钟甚至是俩小时的播客时长（长时间的信息输出），大大提高用户接受观点的可能性。

「flomo」就是以播客为主要宣传路径，让用户了解背后的笔记方法论和产品功能。

Image Collector 上架商店后，我也做了一些之前没做过的宣传尝试：比如写下本篇经验总结的文章，比如制作一条宣传视频(可覆盖小红书 & 视频号)。

写在最后

走完整个 AI 独立开发流程之后，我还有一些零散的感受和认知：

1. 项目时间成本：我从零开始学习 Cursor 到上架产品（包含两个版本迭代），总工作时长应该是 20-30 小时。由于缺少某些关键经验，新手试错成本并不低，无法像社媒上的大牛一样 1-2 小时完成开发上线。
2. 付费墙限制：由于 Cursor 免费额度有限的原因，AI 的智能程度不一致。刚开始注册时，AI 很聪明，写的很快，Debug 也很准。越往后用（我差不多在第 3/4 天，可能限额已用完），AI 出现幻觉越频繁，无法直接修改代码的情况越多，影响其他部分代码导致无法直接应用的机率越大。
3. 对于想要自己创建插件/小工具的设计师、产品经理，当前 AI 能力足以无痛上手创建小玩意。
4. 但如果和我一样没有代码基础，用 AI 也只能做一些小而美的小工具。一旦产品体量庞大，功能多，代码逻辑复杂，自己又无法看懂函数相互关系的话，容易不同部分修改彼此影响，也容易产生冗余。
5. 跟身边的 web 前端研发朋友聊了聊，免费的 Cursor 固然很棒，但需要付费之后，他们自己也不是不能写，感觉没太必要。跟身边的 iOS 研发朋友也有聊过，虽然写代码的部分可以在 Cursor 里一路 tab，但是 Debug 部分没有 Xcode 好用（还是需要把 Xcode 内容复制回 Cursor），目前 AI 也只能解决部分问题。

总体来说，未来已来。鼓励每一位对 AI 编程感兴趣的朋友，动手做些方便自己方便朋友的小插件，整个过程还是蛮有趣的。