V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
Pony996
V2EX  ›  分享创造

我做了一个浏览器仪表盘

  •  
  •   Pony996 · 110 天前 · 1854 次点击
    这是一个创建于 110 天前的主题,其中的信息可能已经有所发展或是发生改变。
    前几天逛 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
    18 条回复    2024-08-01 10:12:32 +08:00
    qwertyzzz
        1
    qwertyzzz  
       110 天前
    403
    tim9527
        2
    tim9527  
       110 天前
    简单体验了一下,edge 垂直标签页时显示有问题,右上角的文字不显示
    Pony996
        3
    Pony996  
    OP
       110 天前
    @qwertyzzz 哪个 403 了?
    Pony996
        4
    Pony996  
    OP
       110 天前
    @tim9527 啊?没听明白什么问题,哪个模块有问题?
    qwertyzzz
        5
    qwertyzzz  
       110 天前
    @Pony996 #3 图片
    chensuiyi
        6
    chensuiyi  
       110 天前
    好。
    tim9527
        7
    tim9527  
       110 天前
    @Pony996 #4 不是模块,就是我打开垂直标签页,右上角的 UI 显示有点错位。
    usufu
        8
    usufu  
       110 天前
    贴图看不了
    Pony996
        9
    Pony996  
    OP
       110 天前
    @chensuiyi 感谢大佬捧场
    Pony996
        10
    Pony996  
    OP
       110 天前
    @usufu 点进去还可以,掘金文章直接复制过来的,看来是没显示出来
    Pony996
        11
    Pony996  
    OP
       110 天前
    @tim9527 我这里没有任何显示问题,可以说一下设备环境吗,比如分辨率,设备型号,浏览器,亦或者图床贴图看一下
    banchen
        12
    banchen  
       110 天前
    这个图片一看就是加签,或者私有的,只有你自己能看吧
    ChainLock
        13
    ChainLock  
       110 天前
    Pintree 这个项目 github 发一下
    iQXQZX
        14
    iQXQZX  
       110 天前
    图片是隐私图,只有自己能访问,根据 cookie 鉴权的,文章发布后可以获得公开加签访问的图片地址。掘金对所有图片进行私有化改造了,应对防盗风险、安全风险。
    Pony996
        15
    Pony996  
    OP
       109 天前
    @banchen 啊是吗?文章收发到掘金了,这个我直接从掘金复制的
    HuberyPang
        17
    HuberyPang  
       109 天前
    左侧导航栏 文件夹可里面还有文件夹的话默认是展开的,可以进行折叠就好了,左侧导航栏可以设置了 margin-bottom ,收藏文件夹比较多,最下面的一个会展示不全
    Pony996
        18
    Pony996  
    OP
       109 天前
    @HuberyPang 这个会考虑改进
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3996 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 05:13 · PVG 13:13 · LAX 21:13 · JFK 00:13
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.