如何定制firefox火狐浏览器UI样式｜什么是userChrome.css

前言

最近一段时间，Chrome浏览器上的很多插件都无法正常使用了，其中就包括大名鼎鼎的 ublock origin，专门用来屏蔽网页里面的各种广告，非常牛逼。我在刷Youtube视频的时候，总是跳广告，很烦。于是调研了一下其他浏览器，综合考虑下来，决定放弃chrome，转向firefox的怀抱。而且，firefox的最新版已经支持垂直tab标签栏，之前在edge浏览器上用过，很喜欢，奈何edge浏览器太拉垮了！！！

刚安装的FireFox，在定制工具栏时，遇到了一些问题，比如Toolbar上总会显示一段空白区域，始终都无法移除

就像下面这样很难看，对于有强迫症的我来说属实难受

另外，垂直标签栏底部也有一部分内容不是我需要的，还占用空间

接着我就了解到，firefox居然可以用css文件定制浏览器样式，突然有那么一瞬间，我对firefox充满了好感。

那么下面就来看一下，如何定制Firefox的UI样式，达到自己满意的效果。

我们是通过userChrome.css这个文件来定制UI的，那什么是userChrome.css呢？

userChrome.css is a style sheet with special importance to Firefox. The rules in userChrome.css are applied to the user interface, and can override nearly every built-in style rule. Unfortunately, you cannot use userChrome.css to change the functional operation of Firefox; that's what extensions are for (or in rare cases, startup scripts).

简单来说，userChrome.css可以覆盖浏览器的UI样式，但也仅限于修改样式，不能修改功能。通过selector选择器，设置元素的样式，就像平时开发网页一样，没有任何区别

有几个关键步骤需要执行：

启用 userChrome.css 支持，并创建 userChrome.css 文件
开启 Browser Toolbox
用 Browser Toolbox 找到目标元素，定制css样式

如何启用userChrome.css

firefox默认不会加载这个文件，需要主动打开设置

如何创建userChrome.css

如何使用 Browser Toolbox

Browser Toolbox 官方文档

The Browser Toolbox enables you to debug add-ons and the browser’s own JavaScript code rather than just web pages like the normal Toolbox. The Browser Toolbox’s context is the whole browser rather than justsingle page on a single tab.

简单来说，Browser Toolbox 可以对整个浏览器进行调试(比如工具栏、浏览器插件...)，而不仅仅是网页内容

下面的视频展示了如何启用 Browser Toolbox 并使用它

视频中用到的css内容如下：

/* 不显示toolbar上的空白区域 */
#vertical-spacer {
  display: none !important;
}

/* 不显示垂直标签栏底部的工具栏 */
button-group[class*="tools-and-extensions"] {
  display: none !important;
}

其他

有时间再补充一下userChrome.js