跳转到内容
View in the app

A better way to browse. Learn more.

彼岸论坛

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.
欢迎抵达彼岸 彼岸花开 此处谁在 -彼岸论坛

[分享创造] 我做了一个浏览器仪表盘

发表于
前几天逛 V2EX 发现了这么一个项目,Pintree ,这个项目可以将收藏的网站变成一个导航。

原理是安装它的浏览器扩展,导出 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

Featured Replies

No posts to show

创建帐户或登录来提出意见

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.