普通人的AI编程指南:15分钟,从0到1 开发Chrome插件

今天回天津路上,收到好友电话求助。

他负责的业务场景中,团队成员每天要大量搜小红书、抖音、微博、B站、快手等网站。

不仅要对比搜索结果,还要截屏记录存档。

如果用浏览器一个个Tab查看、对比,操作效率低。

问能否同时登录这些网站一起搜。

最好还能放在同一个屏幕里,方便截屏对比。

多年好友提的需求,那必须安排。

自己虽不懂编程,但有AI壮胆,没想到真花20分钟搞出来了。

记录下实现步骤。

Founder Park 正在搭建开发者社群,邀请积极尝试、测试新模型、新技术的开发者、创业者们加入,请扫码详细填写你的产品/项目信息,通过审核后工作人员会拉你入群~
进群之后,你有机会得到:
  • 高浓度的主流模型(如 DeepSeek 等)开发交流;

  • 资源对接,与 API、云厂商、模型厂商直接交流反馈的机会;

  • 好用、有趣的产品/案例,Founder Park 会主动做宣传。


01 

第一步:跟AI聊需求

选最好的模型,一起讨论产品解法。

初始问题:

“我们讨论下,我朋友想同时对比小红书、抖音、微博的搜索结果差异,如何写一个程序实现?”

AI给了一套爬虫抓取方案,我觉得有点复杂,要考虑防止封禁问题。

于是追问:

如果不用爬虫呢?有什么解决办法,比如iframe或者其他手段

AI 一口气给了七个解法。

综合评估,觉得浏览器插件简单,也容易交付,装到Chrome浏览器就行。

另外想到,搜索结果登录前后可能不一样,甚至不登录不让用。

追问:

“如何解决登录问题呢?”

至此,解法已经相对清晰。

AI 回复中包含了文件目录结构、待创建文件说明等信息。

只需要复制,一起发给AI编程工具即可。


02 

第二步:配置Cursor AI编辑器 (可选)

最近用Cursor多些。

推荐一个网站,里面收藏了大量Cursor的编程Rules。

可理解为给编程工具写的Prompt,让它在此代码领域变得更专业。

https://cursor.directory/

搜索到一个专门用于 Chrome 插件开发的Rule。

https://cursor.directory/chrome-extension-development

点击图标复制命令,然后打开Cursor终端运行,就会自动安装好Rule。

或在项目根目录创建.cursor文件夹、再建一个子文件夹rules,里面放一个文件,扩展名叫 xxx.mdc,内容是上面看到的一大段Prompt。


03 

发给AI编程工具Cursor

(或者Trae/Windsurf)

为啥不直接跟AI编程工具对话找解法呢?

不少AI编程工具有聊天模式,其实也行。

但我觉得那个对话框太小,没理清思路前,不着急启动。

回车后,只需要等着,AI就会完成所有的代码。

开发Chrome插件必须要有图标,否则加载会失败。

AI 编程工具会生成icon文件,但生成的不能用,会报错。

制作图标,可以试试:
https://icon.kitchen/

步骤:选一个Emoji -> 选个配色 -> 下载

解压Zip包,打开Web目录,拿到 icon-512.png,用PS工具处理成三个大小尺寸:
128*128、48*48、16*16

或跟Cursor对话,让它处理成指定尺寸。


04 

第四步:本地安装测试插件

打开Chrome浏览器,地址栏输入:
⁠chrome://extensions/

1. 右上角开启”开发者模式”

2.点击”加载已解压的扩展程序”,浏览选择你的Chrome开发文件夹。

3. 完成后插件将显示在扩展列表中。

05 

第五步:持续对话迭代

不断地跟Cursor对话,提你的修改要求就行。

修改后如何测试呢?

我之前都是移除插件,重新加载。

后发现已安装插件,旁边有个刷新按钮,点击更新就行。

最终开发好的插件如下:

还有个标签页布局模式,像推拉抽屉一样。


06 

如何发布插件到应用商店?

打开Chrome应用商店开发中心,注册为开发者,然后交5美元。

https://developer.chrome.com/docs/webstore/

一次性收费,以后上架多少个应用都不用再花钱。

注册好以后,在后台选择“上传新内容”。

https://chrome.google.com/webstore/devconsole/

除上传你压缩为zip格式的项目文件外。

还需要准备以下内容:

For 商品详情页

1. 应用Logo:128×128
2. 屏幕截屏:1280×800 或 640×400 至少一张
3. 小型宣传图块:440×280
4. 顶部宣传图块:1400×560

For 隐私权(页面)

描述插件用途,还有用到各种权限的合理原因。

不知道审核员是中国人还是外国人,所以发了中英双语的说明。

小技巧: 可以让 Cursor 解释使用各种权限的原因,它会自动写入Readme文档中。

当没填写完信息前,“提请审核”一直是置灰状态。

填写完整后提交即可。

一般新提交扩展: 2-3个工作日,更新现有扩展: 1-2个工作日。

记得我上一个复制标题和网址的插件,只用一天就审核通过了。

https://chromewebstore.google.com/detail/title-url-copier/kconeemaffcgejhcegceinkhalmgdicf

下面是我开发完的插件,如等不及审核,直接下载本地安装:

https://pan.quark.cn/s/fb93379f3258


07 

后记

前段时间,我用AI编程给自己开发了不少小工具,比如

【原创】DIY了一个 AI 写作工具,全键盘操作,强的可怕!

【黑科技】一键用 AI 改写输入的任何内容,无论刷推、写文案,还是谈恋爱都用得上

如何更优雅、更有趣的刷推特?教你用 AI 做个推特翻译学习机, 量身定制各种稀奇古怪需求。

今天是第一次帮朋友开发工具。

他看了下插件界面,听了我的功能描述,觉得非常符合预期,嘿嘿:)

另外,我觉得AI时代最需要学习精进的三个技能:

• 编程
• 写作
• 英语

每一项都值得好好学,每一项都有巨大杠杆,每一项都能给我们带来更大自由。

图片

(文:Founder Park)

欢迎分享

发表评论