包阅导读总结
1. 浏览器仪表盘、收藏夹管理、起始页、ChatGPT、开源
2. 作者在逛 v2ex 时发现项目 Pintree 后产生新想法,基于自身浏览器使用痛点,在 ChatGPT 帮助下一天完成新的浏览器起始页,并开源,此为初代版本,后续会持续维护。
3.
– 发现 Pintree 项目,可将收藏网站变成导航
– 原理是安装扩展、导出 json 文件、本地部署源代码并替换
– 作者的新想法
– 做扩展起始页管理收藏夹,解决手欠关网站和多 Tab 切换不便的问题
– 产品实现
– 浏览器扩展,由收藏夹数据驱动,附带最近访问网站和当前 Tab 栏
– 处理用户开两个同样浏览器窗口的特殊情况
– 开发过程
– 让 ChatGPT 生成 demo 并完善
– 作者写前端模板,ChatGPT 补充逻辑完成最终版
– 开源相关
– 初代版本,很多想法未实现,会持续维护
– 提供多种下载地址,求 Star 支持
思维导图:
文章地址:https://juejin.cn/post/7395387245312163903
文章来源:juejin.cn
作者:独立开发者Pony
发布时间:2024/7/25 12:43
语言:中文
总字数:1037字
预计阅读时间:5分钟
评分:88分
标签:浏览器扩展,开源项目,ChatGPT 应用,前端开发,导航页
以下为原文内容
本内容来源于用户推荐转载,旨在分享知识与观点,如有侵权请联系删除 联系邮箱 media@ilingban.com
前几天逛 v2ex 的时候发现了这么一个项目,Pintree,这个项目可以将收藏的网站变成一个导航。
原理是安装它的浏览器扩展**,导出json文件,自己本地部署一套它的导航站源代码,替换 json 文件就可以实现一个上图网站。
我觉得是一个不错的创意,但我立刻有了另一个想法,那就是做一个扩展起始页用来管理我的收藏夹。
但是我并不满足于此,因为我真的有很多浏览器原本没有满足的需求;
比如说我经常手欠随手关掉还能用到的网站,然后再想打开的时候去历史里找很麻烦;
再有就是打开太多 Tab 了每一个都被挤得很小,切换起来很不方便。
于是我准备基于以上需求做一个新起始页;
其实这并不是我第一次做起始页了,我的上一款起始页作品抓鱼鸭,一款专注摸鱼的起始页,这属于我的第二款起始页产品,这次我准备从浏览器使用中的真实痛点出发,去做一款真正解决问题的独立产品。
这款产品实现起来也相当简单,就是一个浏览器扩展,会把你的起始页变成由浏览器收藏夹数据驱动的导航;
在这个导航里还附带你最近访问的网站,以及当前浏览器打开的 Tab 栏。
其实这里边有个坑,那就是如果用户开了两个同样的浏览器窗口,去管理切换的时候需要特殊处理,这一款搞了好久才搞明白的。
好那么需求定了,说干就干;
虽然我曾经做过一次浏览器扩展,但其实我对扩展的 API 并不熟悉,我直接让ChatGPT**给我生成了一个 demo
好经过一系列的 Ai 调教,我成功生成了完整 demo 下图就是 ChatGPT 给我生成的代码运行之后的结果;
虽然 Ui 比较 low 但它五脏俱全,比我写的代码功能还要完善,当然我肯定不能拿这个去糊弄大家,我看了它给出的 demo 后验证需求可以实现,于是我就开始准备画页面。
我的思路是这样的;
ChatGPT 并不能按照我们脑子里想的写出好看的页面,但是它可以基于我们给出的模板去填充逻辑,我只需要写一个 html+css 的模板然后交给它补充逻辑就行了。
说干就干,很快一个前端模板就写完了,下边是初步效果。
然后我把前端模板丢给 GPT 让他自动为我补充逻辑就得出了最终完成版效果;
不得不说,有了 GPT 之后真的是太方便辣,这套东西在 GPT 的帮助下,早上刷 v2ex 有了想法,立刻执行,我只用了一天就完成了。
现在我把这套代码完整的开源出来,大家一块学习;
这个只是一个初代版本,还有很多想法没有实现,后续我会持续维护这套新标签页,作为浏览器仪表盘不会只有这点功能的,可以持续关注;
最后也求大家给我这个项目一个 Star 感谢感谢~
下面是直达链接:
为了防止链接被微信吞,如果都打不开的话,可以直接去这个地址下载:
备用地址:tag.zhuayuya.com/
Edge扩展商城:
microsoftedge.microsoft.com/addons/deta…
开源地址:
github.com/ponysb/TagP… (欢迎Star)