这段时间开发了一个谷歌扩展,是一个智能网页内容提取与分享卡片生成工具,基于AI技术一键将网页精华内容转化为精美卡片,支持多种主题模板与一键分享功能。

扩展链接: https://chromewebstore.google.com/detail/minifox-share-card-生成更好的分/lcnpnocmfipdpebafcabbdjpanllbpbp

也可以在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的项目(https://github.com/fireshort/full-stack-fastapi),通过ai将数据库由postgresql转到了mysql,基本能看懂FastAPI的项目。所以这次后端服务没碰到太多问题 ,都是说好技术栈让AI处理。

除了这个项目,还有就是让Cursor写了一个获取从某个地方开车去深圳各个高中的距离和时间的Python小脚本。这些就是已有的Python经验了。

开发

生成图标

先在Cursor里生成提示词:

我现在想换掉这个扩展的图标,你能帮我生成文生图的英语提示词吗?

我希望新图标是这样的:是一个卡片,右下角有一个可爱的小狐狸