參考：
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个性化主题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。