在Firefox实现垂直标签栏提高使用效率

2023/1/29 firefox 火狐实用浏览器

引言&介绍

我曾经在windows用过一段时间的新版Edge浏览器，它给我留下最大的印象便是大大提高标签页切换效率的垂直标签栏。在打开了数十个网页后，水平标签栏基本只剩下了一堆icon，实在是难以快速找到需要的标签页。而可自动隐藏的垂直标签栏很好的解决了这个问题——默认状态下，其在左侧占据一个很窄的宽度，显示标签页的icon，鼠标移动上去就可以看到较为详细的网站标题名，大大提高了标签页较多时的切换效率。

在火狐浏览器中，我们可以使用浏览器扩展 Tree Style Tab - 树状标签页管理达成垂直标签栏的效果。更进一步搭配自定义css规则，我们便可以实现自动隐藏等功能。这里给出Github上一位大佬的Gist中提供的现成的解决方案。

使用教程

在浏览器打开about:config，搜索并设置toolkit.legacyUserProfileCustomizations.stylesheets为true。
在浏览器打开about:profiles，找到正在使用的用户配置(profile in use)，找到根目录(Root Directory)并打开文件夹(Open Directory)，创建文件夹chrome，并将userChrome.css保存在chrome文件夹中。重启浏览器。
前往官方扩展商城，安装 Tree Style Tab - 树状标签页管理扩展。
在浏览器打开about:addons，找到Tree Style Tab，进入偏好设置(Preferences)，找到高级(Advanced)中的标签栏内容的额外规则(Extra style rules for sidebar contents)，将tree-style-tabs-theme.css中的内容复制进其中。

额外优化

缩短自动隐藏(收回)的延迟时间

该方案由gist中另一位用户提出。原文

找到userChrome.css的这一段代码：

#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] {
  overflow: hidden !important;
  position: relative !important;
  transition: all 0.2s var(--tst-sidepanel-hide-delay) !important;
  min-width: var(--thin-tab-width) !important;
  max-width: var(--thin-tab-width) !important;
  z-index: 2;
}
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]:hover,
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar {
  transition-delay: 0s !important;
  min-width: var(--wide-tab-width) !important;
  max-width: var(--wide-tab-width) !important;
  z-index: 1;
}

将其替换为：

#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] {
    overflow: hidden !important;
    position: relative !important;
    transition: all 300ms !important; /*这一行的300ms可以修改为适当的数值*/
    min-width: var(--thin-tab-width) !important;
    max-width: var(--thin-tab-width) !important;
    z-index: 2;
}
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]:hover,
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar {
    transition: all 300ms !important; /*这一行的300ms可以修改为适当的数值*/
    min-width: var(--wide-tab-width) !important;
    max-width: var(--wide-tab-width) !important;
    z-index: 1;
}

隐藏顶部原生的水平标签栏

在userChrome.css中添加这样如下代码：

/* hides the native tabs */
#TabsToolbar {
  visibility: collapse;
}

重启浏览器，原生的水平标签栏应当已经被隐藏了。

隐藏最顶部的标题栏(不建议)

在工具栏上右键，进入自定义工具栏(Customize Toolbar…)，在下方取消勾选标题栏(Title Bar)并保存。

如果你已经隐藏了顶部原生的水平标签栏，那么我不建议你关闭标题栏。

LOADING...