参考：
https://sspai.com/post/58605
https://icloudnative.io/posts/customize-firefox/

一、概述

因为用了一段时间edge，发现edge操作界面很令人舒适，特别是那个竖直标签栏，还是很舒服的，所以就想firefox能不能也构建类似的界面，毕竟firefox自由度这么高，不好看一点不行。最后发现FlyingFox这款主题，使用里面的hover这个自动隐藏标签栏的子主题。

⚠︎注意，作者在上面的仓库中说明了“本css主题已经停更，仅仅适用于LTS Firefox(78.15) 版本

但这并不影响现版本（本人撰写时版本109.0.1国际版(建议必应国际版搜索)）的使用，只是需要进行一定的修改。

二、firefox基本设置

首先需要开启firefox个性化及相关设置，已经开启的读者可跳过此节。

2.1 about:config设置

首先在firefox新标签输入about:config，忽略警告，搜索toolkit.legacyUserProfileCustomizations.stylesheets，修改为true

如果出现以下情况则选择布尔,添加字段后设置值为true

当然作者在包里还开启了svg.context-properties.content.enabled，该选项默认为true。

2.2 创建个性化主题文件夹

首先是路径：新标签地址about:support，找到：
然后创建文件夹chrome（名称不能有误）
然后创建两个文件：(可以不用创建，这里仅仅作为说明用)

userChrome.css

userContent.css

chrome
├─ userChrome.css
└─ userContent.css.css

至此，装载个性化配置的环境一切准备就绪。

三、个性化

在这里我只介绍我用的这一款，因为版本问题需要作相关修改和说明，如果不喜欢这一款，可以访问以下网站，直接下载，复制chrome\下的文件到上述目录即可，后面的可以不用继续阅读。

https://firefoxcss-store.github.io/

分界线

3.1 FlyingFox主题文件说明

首先我们需要在仓库下载最新release版本，注意不是开发版本，下载完成后第一层文件结构如下：

flyingfox
├─ chrome               /*主界面主要配置文件*/
├─ other_configs        /*标签主题，如果喜欢作者的风格可配置，较为简单，本人没有采用*/
├─ treestyletab         /*仿edge侧边栏需要的插件的配置文件*/
└─ user.js              /*about:config配置，上面已经讲过*/

⚠︎如果不是这个结构证明你下错了

3.2 主要配置文件修改和说明

一般情况下可以直接复制flyingfox\chrome下的所有文件到上文位置，即可完成配置，但由于版本原因，存在比较大的bug，在这里我推荐进行一定的修改以达到理想的效果。

打开flyingfox\chrome，复制路径下所有文件到上文位置，各个文件说明如下：

chrome
├─ config.css               /*界面配置副主文件*/
├─ hide-tabline.css         /*用于隐藏标签栏*/
├─ icons                    /*个性化图标*/
├─ interface                /*界面标签个性化*/
├─ navbar                   /*工具图标等*/
├─ popup                    /*收藏栏*/
├─ todo.md                  /*未知*/
├─ urlbar                   /*地址栏主题*/
├─ userChrome-hover.css     /*子主题1：hover*/
├─ userChrome-overlay.css   /*子主题2：overlay*/
├─ userChrome-static.css    /*子主题3：static*/
├─ userChrome-tabline.css   /*子主题4：tabline*/
├─ userChrome.css           /*入口文件1*/
├─ userContent.css          /*入口文件2*/
├─ variables.css            /*变量库*/
└─ window-controls          /*窗口控制的配置及其图标*/

首先是入口文件userChrome.css：

@import "config.css";
@import "variables.css";
/*@import "icons/icons.css";*/           /*图标喜欢的话可以保留*/
/*@import "urlbar/urlbar.css";*/         /*设置地址栏右端工具，可保留*/
/*@import "navbar/navbar.css";*/         /*工具栏，可保留*/
/*@import "popup/popup.css";*/           /*收藏夹，这个一定要去掉，存在bug*/
@import "interface/interface.css";
@import "userChrome-hover.css";          /*⚠︎修改这个更改子主题，这里我使用子主题1，滑动式标签⚠︎*/

然后是config.css文件，这个文件可不用动，但我不习惯Mac操作界面，需要小改一下：

@import "icons/extension-icons.css";
@import "window-controls/wc-without-tabline-r.css"; /*改为-r，即将三点放到右端*/
@import "hide-tabline.css";
@import "userChrome-static.css";

window-controls/wc-without-tabline-r.css或window-controls/wc-without-tabline.css也需要修改一下，位置.\chrome\window-controls\，找到关键字margin-left或margin-right，作以下修改：

:root:not([inFullscreen]) toolbar#nav-bar {margin-left: 0 !important;margin-right: calc(var(--wc-left-space) * 2 + 90px) !important;/*修改上面这个大小，可达到理想状态↑*/
}

至此chrome\文件修改完毕

3.3 插件treestyletab导入配置

在使用该主题时，因为隐藏了标签栏，需要第三方插件来作为标签栏。直接下载treestyletab插件，在插件配置中开发找到所有配置选项，Import我们的flyingfox\treestyletab下的config.json文件。

另外在高级中导入同一目录下的custom.css

如果使用hover主题则导入custom-hover.css

设置外观为无装饰

另外本人喜欢双击关闭标签，开启了下面选项：
至此标签栏的设置也到此为止。

四、小结

我使用了类似edge的hover子主题，其他主题在这里我就不多讲了，各位可自行试着修改，读一下相关配置文件代码，相信你也会有惊喜。具体各个子主题的样式如何各位可以看作者的仓库下的img文件夹，里面有各个子主题的预览。

【Firefox】类edge个性化主题相关推荐

Chrome让人失望，是时候转到Firefox或Edge？
我们曾报道过谷歌正在移除 Chrome 的关闭其他选项卡,这引起很多用户的讨论,很多用户表现出对 Chrome 浏览器的失望.而在国外,也有很多人认为谷歌这项修改使 Chrome 变得越来越臃肿. 还 ...
flex +overflow在firefox与edge中不生效的问题
代码链接这在chrome中没问题,但是在firefox和edge中,会出现header高度被压缩,并没有100px <div class="container">&l ...
HTML5期末大作业：轮滑运动体育类人物介绍主题网站设计(12页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计
HTML5期末大作业:轮滑运动体育类人物介绍主题网站设计(12页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 web学生网页设计作业源码常见网页 ...
浏览器帧率(fps)对比：QQ,Firefox,Chrome,Edge
笔者使用QQ浏览器频率较高,因此经常会对网页滑动较低的帧率敏感:同时使用的Edge则十分丝滑,为了探究浏览器帧率并试图使浏览器平滑滚动,特做以下测试. 浏览器种类丰富,各有各的优点所在,本文以浏览器运 ...
苹果怎么换个性化主题
现在的手机上都有个性化设置,可以把手机设置成自己喜欢的样子,比如说壁纸,封面等等,苹果手机更换主题的方式是和别的手机不一样的,那么苹果怎么更换个性化主题呢? 1.注册apple id.注册apple ...
chrome，FireFox和Edge性能比较
今天没事,就比较了一下chrome和FireFox在渲染大量图片时的性能,本来想渲染一万张图片,结果chrome要7,8秒,FireFox和Edge直接卡死,最后改用1000张进行比较: 环境: 系统 ...
Flash Player小程序(内嵌窗口)在Chrome、Firefox、Edge、360极速/安全、IE 8、Oprea 36、QQ、搜狗等浏览器上的应用
Flash Player小程序(内嵌窗口):基于跨浏览器的小程序系统-PluginOK(牛插)中间件( https://github.com/wangzuohuai/WebRunLocal )开发,底 ...
彻底解决 Chrome，FireFox，Edge 的 “此Flash Player与您的地区不相容”问题
前言最近在学习selenium进行网站的自动化测试,突发奇想可以使用selenium来制作一款Flash游戏的辅助程序.话不多说,开始研究,没想到却碰到了最头疼的问题."此Flash Pl ...
Hexo 个性化主题配置
接上文:基于 Hexo + GitHub 的个人博客搭建,这篇是写配置 next 个性化主题的. 只记录自己使用的一些配置,不定期更新. 有两个 _config.yml 文件,根目录的是站点配置文件, ...

【Firefox】类edge个性化主题