Matrix 精选

Matrix 是少数派的写作社区，我们主张分享真实的产品体验，有实用价值的经验与思考。我们会不定期挑选 Matrix 最优质的文章，展示来自用户的最真实的体验和观点。

文章代表作者个人观点，少数派仅对标题和排版略作修改。

在浏览器的世界里，Chrome 与它的「内核兄弟们」是标杆级别的存在。但是，自从 Firefox Quantum 的诞生，Firefox 如脱胎换骨一般，使用体验和 Chrome 不相上下，甚至很多用户细节做得比 Chrome 还要好。

关联阅读：全面革新的「火狐」Firefox Quantum 究竟有多快？我们测试了 20 个常用网站

高度自定义的 Firefox 浏览器

我一直都钟情于 Firefox 浏览器，不仅由于 Firefox 自由、开源、为人民而生，还因为我们可以极大程度上将我们的 Firefox 浏览器进行各种样式的魔改，将 Firefox 真正定制为属于我们自己的浏览器。接下来，我来为大家介绍几种魔改 Firefox 的方法。

官方途径

事实上，Firefox 开箱就已经为我们提供了非常多的样式、主题与自定义界面的选项我们可以直接使用。官方直接支持的主题与界面定制主要有下面的几种形式。

主题市场与 Firefox Colors

首先就是 Firefox 插件市场中的「主题市场」为我们提供的琳琅满目的主题。这里的主题样式应有尽有，我们可以直接选择下载并使用，与普通的浏览器插件没有太多差别。

Firefox 主题商店

另外，Firefox 官方还推出了一个自己定制主题的插件：Firefox Color，我们利用这一插件可以直接自己制作一个属于自己的 Firefox 主题，包括标题栏颜色、背景样式、强调色等等一系列内容都可以进行自定义。

Firefox Color：官方主题自定义

关联阅读：用 Firefox Color 定制你的火狐 🦊 | App+1

使用自定义工具栏的功能

除了 Firefox 的 UI 界面颜色，我们还可以自定义 Firefox 界面元素的位置，这里主要是指利用 Firefox 工具栏自带的「个性化」组件功能，对 Firefox 的工具栏进行自定义。我们点击 Firefox 右上角的多功能菜单 ☰ 按钮，选择 Customize，即可进入 Firefox 工具栏自定义的界面。

Firefox 工具栏自定义

虽然这里可自定义的内容不算多，但是我们还是可以稍微进行一些个性化的界面修改，比如将不需要的菜单内容去掉、将搜索栏左右都加上「空白」占位区域……我们甚至还可以将「书签页」，也就是 Bookmarks Toolbar Items，移动到工具栏里面，并将书签的所有「标题」都删除，只留下网页的图标，使得书签与工具栏、拓展插件等位于同一行上，减少屏幕浪费。

将书签固定到工具栏一行

用官方的办法对 Firefox 进行修改大概就只有这些方法。不过，下面还有一些更复杂的方法，能让我们对 Firefox 进行更深程度的定制，实现更为个性化的效果。

Firefox 用户样式与用户脚本

Firefox 浏览器的主界面实际上和我们日常使用的网页的样式定义方法是完全一致的，同样都是「先定义框架，再声明样式」。对 Firefox 来说，我们可以直接利用 CSS 进行界面样式的自定义，并使用一些受支持的 JavaScript 脚本实现 Firefox 界面上尚未实现的功能。（比如在 Windows 的 Firefox 中实现浮动的滚动条。）这些内容是使用 Firefox 的 userChrome.css、userContent.css 以及 userChrome.js 等来进行定义的。我用下面的两个例子，来为大家讲解如何给 Firefox 添加自定义样式与用户脚本。

个性化样式的自定义

在 Firefox 69+ 之后，为了更快的启动速度，Firefox 默认不会去寻找定义样式的 userChrome.css，我们需要手动开启这一功能。在 Firefox 的地址栏访问 about:config，忽略警告，在接下来的界面搜索 toolkit.legacyUserProfileCustomizations.stylesheets，并将这一项目设置为 true，如下图：

开启 Firefox 69+ 的用户样式表功能

之后，我们找到 Firefox Profile 的根目录，我们需要在那里创建定义样式的 userChrome.css。在 Firefox 的地址栏访问 about:support，选择下方的 Profile Folder，点击 Open Folder。

打开 Firefox 的 Profile 根目录

之后打开的文件夹即为我们 Firefox Profile 根目录。在这里，我们创建一个名叫 chrome 的文件夹，接下来的所有自定义脚本我们都会放入这一文件夹之中。

"Chrome" refers to the user interface of the web browser, which is what Google Chrome was named after. —— Chrome 这一单词代指浏览器的用户界面，也是 Google Chrome 浏览器名称的由来。因此，这里的 chrome 与 Google Chrome 浏览器完全没有关系。
创建名为 chrome 的文件夹

之后，在 chrome 文件夹内，我们即可自行创建 userChrome.css 和 userContent.css 这两个样式定义文件，在其中进行自定义即可。

另外，如果你希望实现文章开头截图中的 Firefox 样式，我这里参考 @mut-ex 的 minimal-functional-fox，特别将样式稍微进行了一些调整，以适配 Windows 10 上面的 Firefox 浏览器。我为大家将所需要的样式自定义文件放在了 GitHub 上面：spencerwooo/minimal-functional-fox，如果你没有增加其他的样式文件，那么：

  • 我们首先需要先将 Firefox 的主题设置为默认 Dark 主题，同时，推荐将显示密度设置为 Compact
  • 之后，我们直接将上面仓库里的全部内容下载至本地，并将其中的 userChrome.css、userContent.css 以及两个 SVG 图标 right-arrow.svg、left-arrow.svg 复制到刚刚创建的 chrome 文件夹下
  • 如果一切顺利，我们重启 Firefox，即可看到主题的生效
  • 如果你希望使用图中字体，那么你还需要下载「更纱黑体」，并安装其中的 Sarasa Mono T SC 字体
添加主题效果的 Firefox 浏览器

另外，上图中 Firefox 的新标签页使用的是一个叫做：nightTab 的插件，大家直接下载即可。

使用 userChrome 与 userContent 对 Firefox 进行主题自定义的现成主题非常多，除了上面推荐给大家的主题以外，还有非常知名的：

  • ShadowFox：全局暗黑色主题，将包括 Firefox 设置页、about:xxx 页面以及 40 余个知名拓展程序的弹出页面都设置为暗色主题
  • MaterialFox：模仿 Chrome 设计风格的 Firefox 主题，将 Firefox 标签页的样式打磨得和 Chrome 圆角标签页近乎一致
  • ……

感兴趣的同学可以一一前往下载尝试。

实现新增功能

在定义样式的基础之上，我们还可以借助于 JavaScript 实现 Firefox 尚未实现的一些功能：比如前文提到的「浮动滚动条」。Windows 上面的滚动条如果没有特殊设置，都是占用一定空间的滚动条，不仅难看，还会因为突然出现滚动条而导致界面元素的平移。用下面的方法，我们可以将 Firefox 的滚动条设置成和 macOS、iOS 类似的悬浮于内容之上的滚动条，不占用空间。

实现 Firefox 的悬浮滚动条

在 Firefox 72+ 之后，用 userChrome.js 添加附加功能的步骤稍微有些繁琐。我参考 Aris-t2/CustomJSforFx 的方法，将「浮动滚动条」的功能单独提取出来，放在 GitHub 上：spencerwooo/firefox-overlay-scrollbar。我们先将这一仓库下载下来并解压，得到一个包含名为 firefox 的文件夹以及名为 profile 的文件夹。之后，按照下面的步骤进行操作。

首先，清除 Firefox 用户 Profile 的缓存：在 about:profiles 页面，点击正在使用的 Profile 的 Local Directory » Open Folder，在打开的文件夹中向前一级，将其中的唯一一个文件夹全部删除。（需要将 Firefox 彻底关闭才能删除。）

删除 Firefox 的个人 Profile 文件夹

接下来，我们进入 Firefox 的安装目录：在开始菜单右键点击 Firefox，选择「更多 » 打开文件位置」，在打开的 Firefox 快捷方式上继续右键点击，选择「打开文件所在位置」，不出意外我们就进入了包含有 firefox.exe 的 Firefox 安装目录。我们将刚刚下载得到的 firefox 文件夹里面的：

  • defaults 文件夹
  • config.js 文件

这两个内容复制进入 Firefox 的安装目录，即可。

拥有 firefox.exe 可执行文件的 Firefox 安装目录

之后，我们回到刚刚在上一步修改主题时创建的 chrome 文件夹，将我们下载得到的 profile 文件夹里面的：

  • userChrome 文件夹
  • userChrome.js 文件

这两个内容复制进入 chrome 文件夹，即可。

复制 userChrome 文件夹与 userChrome.js 文件

不出意外的话，我们再次打开 Firefox，就可以看到整个 Firefox 浏览器的滚动条已经全部被替换为「浮动滚动条」了。

如果你仔细查看代码内容的话，你会发现在 userChrome.js 里面，我们实际上引用了 userChrome 文件夹里面的 custom_scrollbars.uc.js 脚本。

userChrome.import("/userChrome/custom_scrollbars.uc.js", "UChrm");

其中正是这一部分代码帮助我们实现「浮动滚动条」功能的。我们可以在这一脚本中进行调整，使得我们 Firefox 的滚动条拥有个性化的颜色、阴影、悬浮效果等等，具体方法在这里就不赘述了。

另外，除了「浮动滚动条」这一功能外，我们还可以通过 userChrome.js 实现更多功能，比如将「拓展程序」的图标显示在左侧边栏里、添加自定义的功能按钮等等。

用 userChrome.js 实现界面移动、新增功能按钮等（来自 CustomJSforFx - Wiki）

在 Aris-t2/CustomJSforFx 的 script 文件夹下有更多的脚本我们可以自行添加，在原仓库的 Wiki 里面也有详细的功能介绍，感兴趣的同学可以直接前往查看。我们下载相应的脚本到 userChrome 目录下，并在 userChrome.js 文件中按照同样的方法引用对应的代码文件即可。

小结

Firefox 用 userChrome、userContent 等 CSS 样式表进行自定义用户界面的功能是 Firefox 个性化的「杀手锏」。相比市面上以 Chromium 为内核的浏览器，Firefox 的小众更是弥足珍贵。希望这篇文章能帮助你搭建属于你自己的个性化 Firefox 浏览器，感谢阅读。

> 下载少数派 客户端、关注 少数派公众号，探索发现自己的工具使用之道 🔧

> 特惠、好用的硬件产品，尽在 少数派 sspai 官方店铺 🛒