这段时间开发了一个谷歌扩展，是一个智能网页内容提取与分享卡片生成工具，基于AI技术一键将网页精华内容转化为精美卡片，支持多种主题模板与一键分享功能。
扩展链接： chromewebstore.google.com/detail/mini…
也可以在Chrome应用商店搜索：MiniFox Share Card
项目起源
看了一泽的《不懂代码，如何 3 小时打造并上架一款 AI 插件》，感觉不难，就想着也尝试一下，不是想着“彼可取而代之”或者“大丈夫当如是”，毕竟纸上得来终觉浅，绝知此事要躬行，不下场把手弄脏，是很难真正掌握像编程这种复杂的技能的。
技术选型
这个谷歌扩展的界面比较简单，直接参考一泽的选型，用纯js就好，不需要用前端框架。html转图片改成了用html2canvas。
和一泽纯前端的扩展不同，我加上了后端服务。虽然是用免费的智谱GLM-4-flash，但是api key直接暴露在扩展中，感觉和“裸奔”差不多？用了后端服务，api key是隐藏起来了，但是因为用户不需要登录，可能安全性也差不了太多，只是多了一条内裤？不过有后端服务，可以在后端做其他的处理，后面再说。
后端因为只是提供简单的api，选择了Python的FastAPI框架。
本人有Java的项目经验，能看懂Python的代码（不知道新生代程序员在简历上写上“能看懂Python代码”有没有面试机会🤣） ，但是进入AI时代，看不懂Python代码的程序员不是好的产品经理😁
Java太熟悉，一开始要适应Python还不太容易：像Python一个文件里面可以有多个类，函数里面又可以写局部函数，还有灵活的推导式列表。不过适应了也是真香。
Fork了FastAPI的项目（github.com/fireshort/f…），通过ai将数据库由postgresql转到了mysql，基本能看懂FastAPI的项目。所以这次后端服务没碰到太多问题，都是说好技术栈让AI处理。
除了这个项目，还有就是让Cursor写了一个获取从某个地方开车去深圳各个高中的距离和时间的Python小脚本。这些就是已有的Python经验了。
开发
生成图标
先在Cursor里生成提示词：
我现在想换掉这个扩展的图标，你能帮我生成文生图的英语提示词吗？ 我希望新图标是这样的：是一个卡片，右下角有一个可爱的小狐狸
生成的提示词是这样的：
A minimalist and elegant share card icon design, featuring a clean white card as the main element with a cute fox mascot in the bottom right corner. The fox should be small, friendly, and playful, with a modern flat design style. The card should have a subtle shadow and rounded corners. The overall design should be simple yet engaging, perfect for a browser extension icon. The color scheme should be warm and inviting, with the fox in a soft orange color and the card in a light neutral tone. The design should be recognizable even at small sizes (16x16 pixels).
将提示词复制到ChatGPT里，生成的图标就不错：
也去app.leonardo.ai/ 试了，感觉还是ChatGPT这个看起来讨喜一点。后面ChatGPT没有出场机会了。
开发后端服务
后端服务要做的事情不多，直接告诉Cursor： 后端采用fastapi，代码放到backend目录，配置放到配置文件。调用的大模型是glm-4v-flash，也支持OpenAI模式，可以用openai的库。
Cursor生成的代码是传统的requirements.txt文件方式管理依赖，之前学FastAPI学了uv和pyproject.toml的方式，感觉还不错，就让Cursor改过来：
我想用uv和pyproject.toml管理后台项目，你能改过来吗？
Python的工具有时候太多也是一种烦恼，没研究过几个项目，就至少碰到了：pip、conda、poetry、uv。
一泽的提示词模板可以直接搬过去，AI会自动转成Python的f字符串。
后端服务这里加上了对于长链接的处理：会先查有没有og:url，有的话直接取这个链接，如果链接还是太长，再调用短链接服务来将链接处理为短链接。
前端开发
前端的调整相对来说比较琐碎，但是现在开发也简单了很多，可以直接截图跟ai沟通，这个效率没得说的，一图胜千言啊。0.47版Cursor还可以上传多张图片来提问。
中间碰到生成的卡片中二维码显示不出来，和AI多次拉扯，Sonnet一直觉得是“高级”的问题：要加上等待时间，等待二维码生成。后面我逐步看代码，发现AI不知道什么时候加上了错误的判断：把data.QR_URL写成了data.URL。所以和AI协作，省下写代码的时间就不要再省review的时间。
然后发现在Cursor里面设计界面还是比不过Claude的网站，就跑去用Claude设计了暗黑模式模板和四季主题模板： ****
card.html是我用来生成网页分享卡片的模板，里面包含了一些变量，card-instance.html是填充了变量后的网页，请参考card.html，以春夏秋冬为主题，再生成4套模板。考虑四季的特点，排版可以不一样，但是必须保留全部的变量，保持优雅、简洁的样式。
Claude的审美真不错，我这种审美不足的就一次过用它的模板了。（可能夏季主题没那么吻合？不过你也可以理解为夏天里吃冰淇淋？不然看着红红火火的卡片也不舒服。）
前端的界面其实和一泽的版本已经相差很远了，生成卡片页面可以直接选主题，生成的卡片直接就是图片，可以右键直接复制。
发布到Chrome应用商店
开发好之后，就是发布到Chrome应用商店了。这一步看起来要填写很多内容，但是Cursor基本可以根据项目内容自动生成，就是截图让Cursor来给出各项内容：
申请是容易的，然而谷歌的审核相当“严格”，3-12号申请，3-15号把我拒了：
Requesting but not using the following permission(s): clipboardWrite
其实申请之前还让AI检查了一下权限是否适当，没检查出来。
把没有用上的权限去掉之后重新提交，3-18号审核通过才正式在谷歌应用商店上线，链接：
chromewebstore.google.com/detail/mini…
也可以在Chrome应用商店搜索：MiniFox Share Card
所以，3小时可能可以开发出一个扩展，3天也不一定能上架🤣
按目前这个效率，感觉谷歌还完全没有使用AI来审核应用，Manus等AI Agent再🐂，可以自动提交扩展，那要等上几天黄花菜都凉了。
总结
分享卡片这个项目不算大，但是能碰到各种典型的问题，如果原来没怎么使用过Cursor之类的开发者工具，可以通过这个项目来练手。你可以不用怎么写代码，但是要有清醒的认识，要带领AI，不要做AI的肉身：只会按AI的建议修改代码。原来没学过不熟悉的编程语言还是要多点了解，哪怕不能手写出来，也要做到能看懂，知道ai在做什么。
