火狐firefox插件：Tab Center Reborn 侧边垂直标签栏【隐藏顶部标签栏】

2024更新：

• 另一个插件Tree Style Tab也能实现侧边垂直标签栏，并且进一步支持树状标签页
• “点击一个标签页，跳回上一个标签页”功能可能需要插件Tab flip for Tree Style Tab

---

以下是插件Tab Center Reborn的经验总结。

先看效果（蓝底是win桌面）:

• 隐藏浏览器顶部的横向标签栏；
  • 全屏模式如下图，鼠标拖住顶部边缘任意位置可拖动窗口；
  • 非全屏模式左上角显示黑色块，可拖住黑色块移动窗口;
• 保留右上角三个按钮：最小化、最大化、关闭；
• 适配了隐私模式；

几个实用操作：

• 当你打开很多标签页时，右击 非当前标签页 可以“释放标签页”，减少内存占用，等再切过去的时候会重新加载；

• 点击当前标签页，会跳回上一次查看的标签页；再点击这个，又会跳回去。。。反复横跳；

• 双击侧边栏下面的空白区域，可以新建标签页，，这样就不用定位到很小的“+”新建了；

使浏览器能够在侧面显示垂直的标签栏，方便浏览大量标签页：

• 安装tab center reborn扩展，然后打开侧边栏，切换为Tab center reborn；

隐藏浏览器原来的顶部标签栏：

• about:config搜索toolkit.legacyUserProfileCustomizations.stylesheets设置为true;

• 创建userChrome.css

  • about:support页面打开“配置文件夹”

  • 在火狐的配置文件夹中创建chrome/userChrome.css文件，内容如下（我的Firefox版本85.0.2）：

    #main-window:not([drawtitle="true"]):not([inFullscreen="true"]) 
    
    #nav-bar { 
        margin-left : 30px;  /* leftTop drag area */
        border-right: 140px solid var(--toolbar-bgcolor); 
    }
    :root[sizemode="maximized"] #nav-bar { 
        margin-top: 10px !important;   /* Top drag area */
        margin-left : 0px !important;  /* hidden leftTop drag area in Fullscreen mode*/
        border-right: 140px solid var(--toolbar-bgcolor); 
    }
    :root[privatebrowsingmode="temporary"] #nav-bar { 
        border-right: 180px solid var(--toolbar-bgcolor) !important; 
    }
    
    /* move down to hidden titlebar */
    #titlebar {
        margin-bottom: -31px !important;
    }
    
    /* move down 3 button on rightTop */
    .titlebar-buttonbox-container {
      margin-bottom: -5px !important;
    }
    :root[sizemode="maximized"] .titlebar-buttonbox-container {
      margin-bottom: -15px !important;
    }
    
    /* move down private icon */
    .private-browsing-indicator {
      margin-bottom: -8px !important;
    }
    :root[sizemode="maximized"] .private-browsing-indicator {
      margin-bottom: -18px !important;
    }
    
    /* hidden horizontal tabbar on top */
    #tabbrowser-tabs[orient="horizontal"] {
        visibility: collapse !important;
    }
    
    #sidebar-box[sidebarcommand="_0ad88674-2b41-4cfb-99e3-e206c74a0076_-sidebar-action"] 
    sidebarheader { 
        visibility: collapse !important; 
    }
    
    

  • 重启浏览器生效！

• 必要的样式优化(在浏览器的tab center reborn选项中设置)

  • 图标添加白色的晕轮廓 for dark mode

    body .tab .tab-icon {
    /*  侧边栏标签图标添加白色边缘晕 */
      filter: url('data:image/svg+xml;,<svg xmlns="http://www.w3.org/2000/svg"><filter id="s"><feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 -0.2125 -0.7154 -0.0721 1 0" /><feMorphology operator="dilate" radius="0.1"/><feComponentTransfer><feFuncA type="gamma" offset="0" amplitude="0.5" exponent="1"/></feComponentTransfer><feGaussianBlur stdDeviation="0.1"/><feComposite in="SourceGraphic" operator="over"/></filter></svg>#s');
    }
    
    #settings {
      display: none;  /* 隐藏侧边栏的选项按钮 */
    }
    
    .tab {
    /* 这几个用于自动隐藏滚动条 */
      max-width: 100vw;
    }
    #tablist {
      margin-right: -19px; /* 按需调整 */
      transition: margin-right 0.2s 0.3s;
    }
    #tablist:hover {
      margin-right: 0px;
      transition: margin-right 0.2s 0.1s;
    }
    #tablist-wrapper {
      overflow-x: hidden;
    }
    
    #tablist {
      scrollbar-width: thin; /* 细化滚动条 */
    }