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

首发: Chrome 垂直标签页扩展

  •  
  •   hanguokai · 350 天前 · 7256 次点击
    这是一个创建于 350 天前的主题,其中的信息可能已经有所发展或是发生改变。

    扩展示例

    开发动机

    Edge 等很多浏览器已经内置支持纵向标签页管理的功能了,但是 Chrome 一直不支持。不过从 Chrome 114 开始,扩展程序可以使用浏览器的侧边栏了,所以我就利用侧边栏来实现了一个纵向的标签页功能。

    之前 V2EX 上已经有很多帖子讨论过纵向标签了,结论是有的人喜欢,有的人不喜欢或不习惯。 由于实现这个功能的工作量不大,无论是否有用,我先做出来再说。

    功能介绍

    一、打开侧边栏的三种方法:

    1. 点击扩展图标。
    2. 使用快捷键。快捷键请自行设置 chrome://extensions/shortcuts ,默认 Alt+V 。
    3. 点击通用的浏览器侧边栏图标,再切换到此扩展。

    二、扩展侧边栏提供的功能:

    1. 单击:切换到标签页
    2. 双击:关闭标签页
    3. 右键菜单:提供关闭、固定、复制等功能
    4. 上下拖拽:移动标签页的位置
    5. 底部工具栏:搜索功能
    6. 支持支持明暗(dark/light)主题

    三、设置侧边栏的显示位置: Chrome 浏览器设置 → 外观 → 侧边栏(左侧或右侧)

    安装地址

    Chrome 扩展商店: https://chrome.google.com/webstore/detail/akahnknmcbmgodngfjcflnaljdbhnlfo

    注:此扩展目前仅支持 Chrome 114 及以上版本。Edge 本身已经支持垂直标签页功能了,并且 Edge 目前也不支持 Chrome 侧边栏 API 。

    36 条回复    2024-03-25 16:51:52 +08:00
    dufu1991
        1
    dufu1991  
       350 天前
    想问一下,开启了这个侧边栏,顶部的标签页栏和地址栏是不是同时还在显示?
    vsitebon
        2
    vsitebon  
       350 天前
    借楼问一下,怎么不显示顶部的标签页栏
    hanguokai
        3
    hanguokai  
    OP
       350 天前
    @dufu1991 @vsitebon Chrome 顶部标签栏依然会显示,这个是扩展没办法改变的。Edge 使用自带的垂直标签页默认依然会显示顶部标题栏,空间还是会占据,不过有个选项可以去掉。
    vsitebon
        4
    vsitebon  
       350 天前
    @hanguokai 好的,但是依旧感谢!至少现在 search tab 也方便多了。
    Joeith
        5
    Joeith  
       350 天前
    恭喜你,楼主,打响了 Chrome 标签页侧边栏的第一枪,很期待!
    shyrock
        6
    shyrock  
       350 天前
    我就问一个问题,支持按打开时间从新到旧从上至下显示吗?
    DOMO
        7
    DOMO  
       350 天前
    Ctrl+Shirt+A 不行么
    hanguokai
        8
    hanguokai  
    OP
       350 天前
    @DOMO 和 Ctrl+Shift+A 的区别在于侧边栏可以始终打开、不关闭。

    @shyrock 你这个需求更像是浏览历史记录。和我这里上下拖拽的功能有冲突。
    shyrock
        9
    shyrock  
       350 天前
    @hanguokai #8 不是历史记录。

    实际上,当打开的 tab 不多的时候,原生的标签页是最直观的。
    三方标签页重点解决的就是打开 tab 太多的情况,而这种情况下,都是最后打开的,最右边的 tab 在原生标签页上看不到了。
    所以把最新打开的 tab 显示在标签管理器最上面是符合最高票使用场景的。
    hanguokai
        10
    hanguokai  
    OP
       350 天前
    @shyrock 我这里不管是最左侧还是最右侧,始终会让当前处于激活的标签页显示在可见的位置。因为不管是横向还是纵向,空间总是有限的,让正在使用的标签页显示出来就好。
    dufu1991
        11
    dufu1991  
       350 天前 via iPhone
    @hanguokai 主力浏览器已经换了 Arc 一个多月了,目前已经习惯了,感觉良好。我对界面有强迫症,Chrome 这种不给自定义选项的浏览器感觉不适合我。
    chenxiankong
        12
    chenxiankong  
       350 天前
    想不明白为啥 chrome 不做垂直标签.
    edge,arc,brave 都有了,edge 是在恶心人,但是又不得不用垂直标签栏.难顶
    hackpro
        13
    hackpro  
       349 天前 via iPhone
    可以把书签也搞成垂直的嘛
    最好做成树状的😄
    Pipecraft
        14
    Pipecraft  
       349 天前
    @hackpro #13 侧边栏里的浏览器自带的就是。

    autoxbc
        15
    autoxbc  
       349 天前
    试了下很棒。希望搜索栏可以隐藏,日常很少超过一屏,搜索需求不强
    aitianci
        16
    aitianci  
       349 天前
    迫切需要类似 Edge 的 sidebar 功能,我平常就靠这个悄悄摸鱼,但是 Edge 日渐恶心,想回 Chrome 了。
    devliu1
        17
    devliu1  
       349 天前
    正好需要
    devliu1
        18
    devliu1  
       349 天前
    侧栏宽度能不能调啊
    hanguokai
        19
    hanguokai  
    OP
       349 天前
    Chrome 能否不显示顶部标签栏?经别人提醒,Chromebook 的 tablet 模式是不显示顶部标签栏的,比如那种能 360 度折叠的 Chromebook 。或者在 Chromebook 上开启 Touch UI Layout 这个 flags 也可以启动 tablet 模式。但是在其它操作系统上,启用了这个 flag 好像也无法隐藏顶部标签栏。
    neochen13
        20
    neochen13  
       349 天前
    这真的是太棒了!
    melkor
        21
    melkor  
       349 天前 via iPhone
    @aitianci 试试 vivaldi 打开新世界
    vtexer
        22
    vtexer  
       349 天前
    垂直标签页和书签能不能横向展示,更方便切换
    hackpro
        23
    hackpro  
       349 天前
    感谢分享 非常好用

    提两个小的建议:
    1. 允许自定义侧边栏的宽度,因为每个人工作显示环境不一样,具体可以参考下 Tab-tree 的实现
    2. 当 vertical-tab 侧边栏显示的时候 允许通过快捷键进行 Reading/Bookmark/Journey 的切换 这样就可以全击键方式实现完整控制
    cwjj222
        24
    cwjj222  
       348 天前
    hanguokai
        25
    hanguokai  
    OP
       348 天前
    @devliu1 @hackpro 宽度现在只能用户自己调,同一个窗口会记住上次打开的宽度。以后等 Chrome 支持设定宽度了,我再更新。 其它内置的 Reading/Bookmark/Journey 功能有没有快捷键激活不是这个扩展能定义的。

    @cwjj222 那个扩展没有使用最新的侧边栏 API ,所以需要的权限更大并且在某些特殊页面中无法使用,以后更新到侧边栏 API 后这些问题可以解决。至于功能,每个扩展的定位不同。由于侧边栏的空间很小,我不想加入太多其它功能。
    jixule
        26
    jixule  
       347 天前
    问个题外话,开发者工具的 network 点表头排序只能上下不能恢复默认吗,目前只有关掉再打开排序才是默认;
    还有 header 改版后的 label 实在太宽了,不好分辨也没斑马线
    chenxiankong
        27
    chenxiankong  
       345 天前
    插件很棒!提几个建议:
    1. 能否适配 chrome 的标签页分组功能
    2. 目前自定义宽度感觉过小,占用屏幕部分太多
    3. 能否对标签页内的内容进行整体缩放.
    a154312237
        28
    a154312237  
       221 天前
    如果能折叠标签页组就太棒了
    hanguokai
        29
    hanguokai  
    OP
       153 天前   ❤️ 1
    @a154312237 现在最新版本已经支持折叠分组了
    HvangStormstout
        30
    HvangStormstout  
       145 天前   ❤️ 1
    楼主做的这个,比 EDGE 还要牛,
    EDGE 只支持竖直标签页 or 横向弹簧标签页,二选一;
    楼主这个可以在开启横向弹簧标签页的同时,再启用竖直标签页(通过侧边栏的方式);
    ---
    在 chrome 官方没有做垂直标签页出来之前,楼主的这个就是最好用的。
    就是不知道性能怎么样,比方说在 300 个流媒体网站( b 站)标签页多开的情况下是否会卡死,有待测试。
    ---
    楼主的工作解决了我(强迫症+冲浪)的巨大痛点,俺通过捐赠链接捐了一瓶小可乐,以示敬意,爱您,么么哒~
    kiii
        31
    kiii  
       115 天前
    这个还在更新吗?如果可以每次开启自动打开侧边栏,并且隐藏顶部栏就牛逼了。还需要可以最小化到图标那种。
    hanguokai
        32
    hanguokai  
    OP
       115 天前
    @kiii 这几个功能不是不想做,(至少目前)是做不到的。
    kiii
        33
    kiii  
       114 天前
    @hanguokai 好吧,功能限制,其实我是 cent 浏览器用户,可惜不更新,所以想换浏览器,然后感觉 edge 体验还不错,但是没有可用的便携版,所以转投 chrome ,结果多开标签体验不好,所以才搜索到这个。
    wuguifeng
        34
    wuguifeng  
       74 天前
    @hanguokai #25 关于侧边栏调节宽度,可以参考另一个扩展程序[书签侧边栏]( https://chromewebstore.google.com/detail/jdbnofccmhefkmjbkkdkfiicjkgofkdh),它的侧边栏有两种实现方式,一种是内嵌在侧边栏 API ,另一种就是悬浮贴边,第二种方式几乎能随意调节宽度
    hanguokai
        35
    hanguokai  
    OP
       74 天前
    @wuguifeng 在 Chrome 推出侧边栏 API 之前,嵌入到当前网页里显示是常见的实现方法。但是这种方法有一些固有的缺点:1. 需要 all_urls 这个超级权限(读取用户所有网站数据)。2. 对部分特殊网页无效,如 chrome:// 内建页面。3. 切换页面、标签时,无法全局使用(一直保持打开)。所以,权衡权限(隐私)和功能效果的利弊,以及开发维护的工作量,没必要再用这个方法了。还有一种方法是并列两个窗口来模拟,但是效果也不好。
    T4b918jJOXdkJ3h8
        36
    T4b918jJOXdkJ3h8  
       60 天前
    op 还在 google 吗 上海办公室吗
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5023 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 09:20 · PVG 17:20 · LAX 02:20 · JFK 05:20
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.