Firefox烹饪指北

背景

笔者的桌面端主力浏览器一直是LibreWolf，基于Mozilla Firefox重新打包的浏览器，可以视为Firefox隐私守护开箱即用版。

一图流：Why Choose Firefox not Chrome

	Firefox	Chrome
开源程度	完全开源，社区活跃	内核开源，Google绝对主导
开发商	Mozilla基金会	Google
隐私和数据	致力于保护用户隐私，内置增强模式，真正的无痕浏览	商业模式依赖数据搜集，隐私是生意
自定义程度	允许高度自定义	禁止高度自定义
网页适配性	最标准，但市场占比低，非优先适配对象	市场占比极大，优先适配

就在今年，Google因为通过隐私模式搜集数据被告。

LibreWolf对比Firefox：

去除了Mozilla遥测服务
去除了Pocket组件
提供了默认的隐私设置，更加严格（Firefox需要自己额外配置）
同步Firefox更新打包

为了提升LibreWolf（同样适用于Firefox）的使用体验，也许你可以按如下教程装扮你的浏览器。

如果对隐私需求没有那么强，希望有Firefox其他功能开箱即用体验的用户可以选择Floorp ，注意：该分支属于深度定制，因此在更新上会落后主分支。

设置篇

扩展篇

部分扩展是需要配合userchrome.css生效的

隐私守护

扩展名称	概述
AdGuard	去除广告，阻止跟踪器。相比uBlock origin，AdGuard更加懒人化，同时内置隐身模式
CanvaBlocker	伪造浏览器指纹，生成随机指纹
ClearURLs	复制url时移除跟踪参数
Don`t track me Google	针对Google Search特化
Firefox Multi-Accout Contains	Firefox官方出品，类似应用分身和网站沙箱，支持为特定网站始终以指定容器打开
Firefox Relay	Firefox官方出品，马甲邮箱
PopUpOFF	阻止页面的恼人通知，比如cookie权限通知
SearXNG	隐私搜索引擎扩展，将SearXNG添加到搜索引擎中
User-Agent Switcher and Manager	更改浏览器UA，使网站以设定UA呈现网页
Privacy Badger	更智能地阻止追踪器

垂直标签页

当你打开的标签页过多时，水平标签页的使用可以称得上噩梦了，唯一让你迅速区分不同标签页的方法只有网站图标，标题往往会被挤压。垂直标签页则很好地规避了这一点。通过适当地修改，可以实现需要时标签页展开，不需要时标签页收缩，且自带分组功能。

效果如图：

安装Sidebery

一款Firefox扩展，利用Firefox自带的侧边栏，实现垂直标签的效果，相比Tree Style Tab（另一款同类扩展）更加完善，美观且可以在标签页面板使用浏览器原生的菜单页。
关于Sidebery的配置主要参考 Yet another Sidebery setup 。

安装扩展Sidebery 。
打开Sidebery设置，导航栏布局选择隐藏。对于不需要多个标签页面板的用户来说，这在视觉体验上会提升很多。

进入样式编辑器，添加如下css样式：

#root {
  --tabs-font: 10pt Segoe UI;
  --tabs-count-font: .625rem Segoe UI;
  --bookmarks-bookmark-font: .875rem Segoe UI;
  --bookmarks-folder-font: 10pt Segoe UI;
}

/* Adjust styles according to sidebar width */
@media screen and (max-width: 49px) {
  #root {
    --tabs-indent: unset;
  }
  .ScrollBox > .scroll-container {
    overflow: hidden;
  }
  .Tab .audio {
    left: 10px;
    transform: scale(.80);
    transform: translateY(4px);
    z-index: 99 !important;
  }
  .Tab .title {
    visibility: collapse;
  }
}

@media screen and (min-width: 49px) {
  .Tab .audio {
    left: 28px;
  }
}

/*
 * Add margins and rounding around tabs
 */ 

#root {
  --tabs-height: 30px;
}

/* Background layer */

.Tab {
  margin: 0 4px;
  width: unset;
}
.Tab .lvl-wrapper:after {
  content: '';
  position: absolute;
  top: 4px;
  width: 100%;
  height: calc(100% - 5px);
  border-radius: 4px;
  z-index: -1;
}

@media (prefers-color-scheme:light) {
  #root {
    --tabs-activated-bg: white !important;
    --tabs-bg-active: var(--tabs-activated-bg) !important;
    --tabs-selected-fg: var(--tabs-activated-fg) !important;
    --tabs-selected-bg: var(--tabs-activated-bg) !important;
    --bg: #f0f0f0 !important;
  }
  .Tab[data-selected] .lvl-wrapper:after,
  .Tab[data-active] .lvl-wrapper:after {
    box-shadow: 0 0 1px rgba(128,128,142,0.9), 0 0 4px rgba(128,128,142,0.5);
  }
}


/* Reset default styles */
.Tab:hover,
.Tab:active,
.Tab[data-active],
.Tab[data-active]:active,
.Tab[data-selected],
.Tab[data-selected]:hover,
.Tab[data-selected]:active {
  background: transparent;
}

/* Reapply styles */

.Tab:hover .lvl-wrapper:after {
  background-color: var(--tabs-bg-hover);
}

.Tab:active .lvl-wrapper:after,
.Tab[data-active]:active .lvl-wrapper:after {
  background-color: var(--tabs-bg-active);
}

.Tab[data-active] .lvl-wrapper:after {
  background-color: var(--tabs-activated-bg);
}


.Tab[data-selected] .lvl-wrapper:after {
  background-color: var(--tabs-selected-bg);,
}

/* Resize and reposition favicons */
.Tab .fav {
  width: 18px;
  height: 18px;
  margin-left: 10px;
}

.Tab .placeholder > svg {
  width: 18px;
  height: 18px;
}

.Tab .fav,
.Tab .placeholder,
.Tab .t-box {
  margin-bottom: -2px;
}

地址栏输入：about:config，回车，进入高级设置。
输入userprof，将toolkit.legacyUserProfileCustomizations.stylesheets值更改为true。对于LibreWolf用户，请在设置–>LibreWolf–>Browser Behavior中勾选Allow userChrome.css customization。
地址栏输入：about:support，回车，进入排障信息。
点击配置文件夹中的打开文件，进入配置目录，初次设置时没有chrome文件夹，请手动创建。

在chrome文件夹中新建userChrome.css样式文件，并加入以下内容：

/*Toggle Native Tab Bar*/
#main-window #titlebar {
  overflow: hidden;
  transition: height 0.3s 0.3s !important;
}

/* Hidden state: Hide native tabs strip */
#main-window[titlepreface*=" "] #titlebar { height: 0 !important; }

/* Hidden state: Fix z-index of active pinned tabs */
#main-window[titlepreface*=" "] #tabbrowser-tabs { z-index: 0 !important; }

/* Sidebery */
/* #main-window[titlepreface*="🦊 "] .tabbrowser-tab {
  visibility: collapse !important;
}

#main-window[titlepreface*="🦊 "] .titlebar-button {
  height: 40px !important;
}

#main-window[titlepreface*="🦊 "] #nav-bar {
  margin-top: -40px;
  margin-right: 137px;
  box-shadow: none !important;
}
#main-window[titlepreface*="🦊 "] #titlebar-spacer {
  background-color: var(--chrome-secondary-background-color);
}

#main-window[titlepreface*="🦊 "] #titlebar-buttonbox-container {
  background-color: var(--chrome-secondary-background-color);
}

#main-window[titlepreface*="🦊 "] .titlebar-color {
  background-color: var(--toolbar-bgcolor);
} */

#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] #sidebar-header {
  visibility: collapse;
}

/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/autohide_sidebar.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */

/* Show sidebar only when the cursor is over it  */
/* The border controlling sidebar width will be removed so you'll need to modify these values to change width */

#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] {
  --uc-sidebar-width: 40px !important;
  --uc-sidebar-hover-width: 250px;
  --uc-autohide-sidebar-delay: 10ms; /* Wait 0.3s before hiding sidebar */
  position: relative;
  min-width: var(--uc-sidebar-width) !important;
  width: var(--uc-sidebar-width) !important;
  max-width: var(--uc-sidebar-width) !important;
  z-index:1;
}

#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] > #sidebar-splitter {
  display: none
}

#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] > #sidebar {
  transition: min-width 115ms linear var(--uc-autohide-sidebar-delay) !important;
  min-width: var(--uc-sidebar-width) !important;
  will-change: min-width;
}

#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:hover > #sidebar{
  min-width: var(--uc-sidebar-hover-width) !important;
  transition-delay: 0ms !important
}

/* Add sidebar divider and give it background */

#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] > #sidebar,
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] > #sidebar-header {
  background-color: var(--toolbar-bgcolor) !important;
/*  border-inline: 1px solid var(--sidebar-border-color) !important;*/
  border-inline: 1px solid var(--chrome-content-separator-color) !important;
  border-inline-width: 0px 1px;
}
#sidebar-box[positionend]{
  direction: rtl
}
#sidebar-box[positionend] > *{
  direction: ltr
}

#sidebar-box[positionend]:-moz-locale-dir(rtl){
  direction: ltr
}
#sidebar-box[positionend]:-moz-locale-dir(rtl) > *{
  direction: rtl
}

保存，关闭，重新启动浏览器。

由于Firefox本身原因，打开新的浏览器窗口时，垂直标签栏并不会自动加载，需要手动点击扩展按钮，因此请将扩展按钮放置在菜单栏的合适位置。

隐藏顶部标签页栏

由于已经有垂直标签栏了，水平标签栏自然需要隐藏。由于后者与窗口控件（关闭、最大化、最小化）并排，因此隐藏后我们需要采用其它手段实现窗口控件的功能。

涉及到的扩展如下：

Toggle Native Tab Bar ：配合userChrome.css配置实现可选的隐藏顶部垂直标签页栏，点击扩展会在隐藏与否之间切换。由于userChrome.css样式已经在之前配置Sidebery时配置了（即前三行有效代码），此处无需再打开文件进行修改。
隐藏窗口按钮
关闭窗口按钮
最大化窗口按钮

通过右键–>定制菜单栏合理地对菜单栏进行布局。