原理是安装它的浏览器扩展,导出 json 文件,自己本地部署一套它的导航站源代码,替换 json 文件就可以实现一个上图网站。
我觉得是一个不错的创意,但我立刻有了另一个想法,那就是做一个扩展起始页用来管理我的收藏夹。
但是我并不满足于此,因为我真的有很多浏览器原本没有满足的需求;
比如说我经常手欠随手关掉还能用到的网站,然后再想打开的时候去历史里找很麻烦;
再有就是打开太多 Tab 了每一个都被挤得很小,切换起来很不方便。
于是我准备基于以上需求做一个新起始页;
其实这并不是我第一次做起始页了,我的上一款起始页作品抓鱼鸭,一款专注摸鱼的起始页,这属于我的第二款起始页产品,这次我准备从浏览器使用中的真实痛点出发,去做一款真正解决问题的独立产品。
这款产品实现起来也相当简单,就是一个浏览器扩展,会把你的起始页变成由浏览器收藏夹数据驱动的导航;
在这个导航里还附带你最近访问的网站,以及当前浏览器打开的 Tab 栏。
其实这里边有个坑,那就是如果用户开了两个同样的浏览器窗口,去管理切换的时候需要特殊处理,这一款搞了好久才搞明白的。
好那么需求定了,说干就干;
虽然我曾经做过一次浏览器扩展,但其实我对扩展的 API 并不熟悉,我直接让 ChatGPT 给我生成了一个 demo
经过简单的修改最终效果如下
![微信图片_20240723193112.png]( https://p0-xtjj-private.juejin.cn/tos-cn-i-73owjymdk6/597d00af657a426fb80ab0bb0fe284db~tplv-73owjymdk6-jj-mark:0:0:0:0:q75.awebp?policy=eyJ2bSI6MywidWlkIjoiMzk0OTg2MjI3NjAzOTgwMCJ9&rk3s=e9ecf3d6&x-orig-authkey=f32326d3454f2ac7e96d3d06cdbb035152127018&x-orig-expires=1722405474&x-orig-sign=lrmMbfJr9NkoyJVtThhkMDrUaKM%3D)
![微信图片_20240723193117.png]( https://p0-xtjj-private.juejin.cn/tos-cn-i-73owjymdk6/89f27c74e177474b9fff88f1de34ad35~tplv-73owjymdk6-jj-mark:0:0:0:0:q75.awebp?policy=eyJ2bSI6MywidWlkIjoiMzk0OTg2MjI3NjAzOTgwMCJ9&rk3s=e9ecf3d6&x-orig-authkey=f32326d3454f2ac7e96d3d06cdbb035152127018&x-orig-expires=1722405506&x-orig-sign=5ju4Eqz7eHwY0JvpfP3zk4vhMys%3D)
![微信截图_20240719171512.png]( https://p0-xtjj-private.juejin.cn/tos-cn-i-73owjymdk6/c2ae314868944a8a98970877779f5a25~tplv-73owjymdk6-jj-mark:0:0:0:0:q75.awebp?policy=eyJ2bSI6MywidWlkIjoiMzk0OTg2MjI3NjAzOTgwMCJ9&rk3s=e9ecf3d6&x-orig-authkey=f32326d3454f2ac7e96d3d06cdbb035152127018&x-orig-expires=1722405524&x-orig-sign=%2Fqm8r6XnydwLfm2WlXF4GEt0ZAg%3D)
github: https://github.com/ponysb/TagPlanet
edge 扩展商店: https://microsoftedge.microsoft.com/addons/detail/podfjomopoejmlkfnhanlmlagcnlappd