Firefox 和 Chrome 分別是當(dāng)今世界最流行的瀏覽器之一，雖然這兩款瀏覽器都有各自的優(yōu)勢(shì)，但隨著時(shí)間的推移，F(xiàn)irefox 的受歡迎程度在逐漸下降，開始走下坡路。這無可厚非，并不是 Firefox 不行了，而是 Chrome 太強(qiáng)了，背靠 Google 頂級(jí)大廠，無縫整合 Google 服務(wù)，界面極度簡(jiǎn)潔，它就像一個(gè)十足精美的籃子，你往里面放的雞蛋越多，它就越好用。

所以，先說結(jié)論，F(xiàn)irefox 幾乎不可能在短時(shí)間內(nèi)超過 Chrome 瀏覽器。

然而，但是，作為用戶，我們需要換個(gè)角度去思考，任何一個(gè)市場(chǎng)如果一家獨(dú)大，那么這個(gè)家伙最終很可能會(huì)變成〖惡龍〗，想必大家對(duì) Chrome 收集用戶隱私的丑聞也有所耳聞。只有互相競(jìng)爭(zhēng)才能盡最大可能避免〖惡龍〗的誕生，競(jìng)爭(zhēng)越激烈，用戶越受益，你們可長(zhǎng)點(diǎn)心吧。

如果你喜歡 Firefox，或者不希望 Chrome 變成最終的〖惡龍〗，請(qǐng)?jiān)谀愕碾娔X上為 Firefox 留下一席之地，哪怕是作為備用瀏覽器也行啊。而且 Firefox 是完全開源的，開源抑制壟斷，F(xiàn)irefox 還你自由。

Firefox 的優(yōu)勢(shì)

現(xiàn)在切回 Firefox 的視角，F(xiàn)irefox 背后的團(tuán)隊(duì)是 Mozilla 基金會(huì)，與 Google 這種世界上“最偉大”的公司相比，簡(jiǎn)直是不值一提。但 Firefox 既然能和 Chrome 在同一個(gè)牌桌上同臺(tái)競(jìng)技，它必然是有過人之處的。

Mozilla 基金會(huì)對(duì)計(jì)算機(jī)領(lǐng)域最大的貢獻(xiàn)是 Rust 編程語言，而 Firefox 從 57 版本開始便使用基于 Rust 編程語言開發(fā)的渲染引擎 Servo，Rust 自家人編寫的渲染引擎，值得信賴??。而 Chrome 的 Blink 引擎是用 C++ 寫的。C++ 語言如同 C 語言，很容易因?yàn)閮?nèi)存使用方面的問題而導(dǎo)致安全漏洞（比如：緩沖區(qū)溢出、野指針 ...）。這個(gè)缺點(diǎn)是編程語言本身導(dǎo)致的。Rust 一方面可以達(dá)到與 C/C++ 相當(dāng)?shù)男阅?，另一方面又更加安全，避免?C/C++ 在內(nèi)存和多線程方面的弊端。

另外，我覺得 Firefox 最大的一個(gè)〖?xì)⑹诛怠骄褪歉叨瓤啥ㄖ苹憧梢詰{借自己的想象力把 Firefox 瀏覽器改造成自己想要的任意形態(tài)，而 Chrome 卻只能限定在一個(gè)可控范圍內(nèi)進(jìn)行擴(kuò)展和定制，就是畫個(gè)圈圈，你只能在這個(gè)圈內(nèi)自由活動(dòng)。如果你不太理解什么是改造成任意形態(tài)，我可以舉個(gè)例子，比如我可以將 Firefox 的 about 界面 Logo 替換成任意圖片：

Chrome 有這個(gè)可能嗎？

再比如我可以將 Firefox 的地址欄做成如下炫酷的特效，還可以將標(biāo)簽頁的樣式改造成如下的“花里胡哨”的樣式：

Chrome 有這本事嗎？

現(xiàn)在你應(yīng)該理解我的意思了吧，Chrome 在很多地方進(jìn)行了限制，束縛了我們的手腳，讓你的擴(kuò)展只能在有限的范圍內(nèi)進(jìn)行定制。

如果你想掌握對(duì)瀏覽器絕對(duì)的控制權(quán)，喜歡折騰，F(xiàn)irefox 無疑是最好的選擇。當(dāng)然，如果你喜歡開箱即用，沒有什么定制化的需求，那選擇 Chrome 是極好的。但是，我還是要強(qiáng)調(diào)一句，即使你選擇了 Chrome，為了避免〖惡龍〗的誕生，還是希望你能把 Firefox 作為備用瀏覽器。

好了，廢話就扯這么多，還是直接進(jìn)入主題吧，本文將會(huì)手把手教大家如何任意定制全宇宙最強(qiáng)瀏覽器 Firefox。

Firefox 瀏覽器的個(gè)性化大致有五種方式，一種是與其他瀏覽器一樣，通過瀏覽器默認(rèn)的選項(xiàng)和主題進(jìn)行定制，不過能修改的程度有限；一種是通過擴(kuò)展對(duì)功能進(jìn)行拓展；還有兩種是通過油猴腳本和 stylus 之類的擴(kuò)展再結(jié)合自定義 CSS 來對(duì)網(wǎng)頁樣式進(jìn)行自定義。這四種方式 Chrome 瀏覽器也可以做到，并沒有什么特別之處，我也不打算重點(diǎn)介紹，放到后面再講。

Firefox 最頂級(jí)的個(gè)性化方式就是用戶樣式和用戶腳本來定制。什么意思呢？

• 用戶樣式可以理解為 stylus 這一類擴(kuò)展的加強(qiáng)版，CSS 樣式可修改的范圍是整個(gè)瀏覽器的任何角落，并不局限于〖網(wǎng)頁〗這個(gè)范圍內(nèi)。但用戶樣式只能修改已有的元素，不能創(chuàng)建新功能。
• 用戶腳本可以理解為油猴腳本的加強(qiáng)版，腳本可修改的范圍是整個(gè)瀏覽器的任何角落，并不局限于〖網(wǎng)頁〗這個(gè)范圍內(nèi)。

結(jié)合用戶樣式與用戶腳本，我們可以直接利用 CSS 進(jìn)行界面樣式的自定義，并使用一些受支持的 JavaScript 腳本實(shí)現(xiàn) Firefox 界面上尚未實(shí)現(xiàn)的功能，以此來實(shí)現(xiàn)對(duì) Firefox 的任意魔改。這些內(nèi)容是使用 Firefox 的 userChrome.css、userContent.css 以及 userChrome.js 等來進(jìn)行定義的。

自定義用戶樣式

Firefox 自 69 版本以后，為了更快的啟動(dòng)速度，默認(rèn)不會(huì)去尋找定義樣式的 userChrome.css 和 userContent.css，我們需要手動(dòng)開啟這一功能。在 Firefox 的地址欄訪問 about:config，忽略警告，在接下來的界面搜索 toolkit.legacyUserProfileCustomizations.stylesheets，并將這一項(xiàng)目設(shè)置為 true，如下圖：

之后，我們找到 Firefox Profile 的根目錄，我們需要在那里創(chuàng)建定義樣式的 userChrome.css。在 Firefox 的地址欄訪問 about:support，選擇下方的 Profile Folder，點(diǎn)擊 Open Folder。

之后打開的文件夾即為 Firefox Profile 根目錄。在這里，我們需要?jiǎng)?chuàng)建一個(gè)名叫 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 瀏覽器完全沒有關(guān)系。

之后我們就可以在 chrome 文件夾內(nèi)自行創(chuàng)建 userChrome.css 和 userContent.css 這兩個(gè)樣式定義文件，在其中進(jìn)行自定義即可。

那么 userChrome.css 與 userContent.css 這兩個(gè)文件有啥區(qū)別呢？

• userChrome.css 是專門用來定制 Firefox〖自身的界面〗（比如 Firefox 自己的“地址欄、搜索欄、快捷菜單、滾動(dòng)條 ......”）
• userContent.css 是專門用來定制 Firefox 瀏覽的網(wǎng)站的界面（如果你對(duì)我博客的某些界面效果不爽，就可以用它來定制）。說白了，userContent.css 可以實(shí)現(xiàn)和 stylus 這一類擴(kuò)展同樣的功能，唯一的區(qū)別在于 userContent.css 還可以定制 Firefox 內(nèi)置頁面和擴(kuò)展頁面的樣式（比如內(nèi)置的新標(biāo)簽頁）。

例如，如果你想像文章開頭截圖那樣將 about 界面的 Logo 替換成別的圖片，只需在 userChrome.css 中添加這么一段 CSS 樣式：

@-moz-document url("chrome://browser/content/aboutDialog.xhtml") {
 /* change logo png, svg, even gif anims */
 #leftBox {
   background-image: url("https://cdn.jsdelivr.net/gh/yangchuansheng/imghosting1@main/img/20210505152049.png") !important;
   background-position: left !important;
   background-repeat: no-repeat !important;
   font-family: Roboto, "LXGW WenKai", sans-serif !important;
 }
}

然后重啟 Firefox 瀏覽器，即可看到 Logo 替換生效了。

當(dāng)然，如果所有的樣式都要我們自己從零開始寫，那也太勸退了，畢竟大多數(shù)人是不懂 CSS 的，有沒有別人寫好的樣式可以直接拿來用呢？還是有很多的，比如：

• Photon Australis[1] : 模仿 Chrome 設(shè)計(jì)風(fēng)格的 Firefox 主題，將 Firefox 標(biāo)簽頁的樣式打磨得和 Chrome 圓角標(biāo)簽頁近乎一致。

• FlyingFox[2] : 我認(rèn)為這是最精美的 Firefox 主題，這也是我目前正在使用的主題。

• FirefoxCSS-Store[3] : 從名字就能看出來，這是一個(gè) Firefox userchrome 主題商店，包含了各種主題任你挑選。

• firefox-csshacks[4] : 這個(gè)倉(cāng)庫(kù)包含了各種特定的樣式，其中 chrome 文件夾包含了 userChrome.css 的樣式，content 文件夾包含了 userContent.css 的樣式。

• FirefoxCSS on Reddit[5] : 這是全球最大的 Firefox 樣式分享社區(qū)，你可以在這里自由討論、提問、分享自己的樣式，或者拿走別人的樣式。

感興趣的小伙伴可以自己下載體驗(yàn)一番。

細(xì)心的小伙伴應(yīng)該能發(fā)現(xiàn)這里有個(gè)問題，所有的樣式必須要保存并重啟瀏覽器之后才能看到它的效果，無法實(shí)時(shí)調(diào)試，這對(duì)于高級(jí)玩家來說是很不友好的，我們需要的是能夠?qū)崟r(shí)調(diào)試任意樣式。這就需要用到自定義用戶腳本了。

自定義用戶腳本

在定義樣式的基礎(chǔ)之上，我們還可以借助于 JavaScript 實(shí)現(xiàn) Firefox 尚未實(shí)現(xiàn)的一些功能：比如前文提到的實(shí)時(shí)調(diào)試樣式。

在 Firefox 72+ 之后，用 JavaScript 添加附加功能的步驟稍微有些繁瑣?？梢詤⒖?xiaoxiaoflood/firefox-scripts[6] 這個(gè)倉(cāng)庫(kù)的方法，

1. 先下載壓縮包 fx-folder.zip[7] 進(jìn)行解壓，得到這么幾個(gè)文件：

$ tree fx-folder
fx-folder
├── config.js
└── defaults
   └── pref
       └── config-prefs.js
2 directories, 2 files

2. macOS 用戶接下來可以右鍵點(diǎn)擊〖訪達(dá)〗（左下角的笑臉圖標(biāo)），選擇〖前往文件夾〗，輸入路徑地址：/Applications/Firefox.app/Contents/MacOS。然后將解壓出來的文件全部拷貝到這個(gè)文件夾里。

      Windows 用戶需要將解壓出來的文件全部拷貝到 Firefox 的安裝路徑下（比如 C:\Program Files\Mozilla Firefox）。

3. 下載壓縮包 utils_scripts_only.zip[8] 進(jìn)行解壓，將解壓出來的文件全部拷貝到前文所述的 chrome 文件夾中（例如，我的路徑是 /Users/carson/Library/Application Support/Firefox/Profiles/pntdm1l9.default-release/chrome）。
4. 重啟 Firefox 瀏覽器。

現(xiàn)在你就可以在 chrome 文件夾根目錄創(chuàng)建自定義腳本來實(shí)現(xiàn)任意功能了。

使用自定義腳本管理自定義樣式

例如，如果你想實(shí)時(shí)調(diào)試自定義樣式，可以使用 xiaoxiaoflood/firefox-scripts[9] 倉(cāng)庫(kù)里的 StyloaiX 腳本，它比 userChrome.css 和 userContent.css 更方便，因?yàn)樗鼡碛幸粋€(gè)強(qiáng)大的編輯器，還能即時(shí)預(yù)覽、錯(cuò)誤檢查、代碼自動(dòng)補(bǔ)全，而且無需重啟瀏覽器即可啟用和禁用樣式。你只需要下載壓縮包 styloaix.zip[10]，然后將解壓出來的文件全部拷貝到 chrome 目錄中：

chrome
├── styloaix.uc.js
└── utils
   └── styloaix
       ├── 16.png
       ├── 16w.png
       ├── autocomplete.js
       ├── edit.css
       ├── edit.js
       └── edit.xhtml
...

重啟 Firefox 瀏覽器就可以看到瀏覽器的工具欄中多了一個(gè)擴(kuò)展的圖標(biāo)，實(shí)際上這不是一個(gè)瀏覽器擴(kuò)展，而是通過 JavaScript 實(shí)現(xiàn)的。

現(xiàn)在我們就可以編寫自定義樣式并實(shí)時(shí)調(diào)試了，方法很簡(jiǎn)單，點(diǎn)擊上述 StyloaiX 圖標(biāo)，然后依次選擇 〖New Style〗--> 〖Blank Style〗。

然后就會(huì)打開一個(gè)編輯器的界面。

然后就可以在里面調(diào)試樣式了。比如我想對(duì)擴(kuò)展界面進(jìn)行自定義，就可以選擇〖New Style〗--> 〖For this page〗，打開編輯器后會(huì)自動(dòng)幫你設(shè)置 CSS 樣式的生效頁面。

往里面加入如下的 CSS 內(nèi)容：

@-moz-document url("about:addons") {
 /* Remove this if it causes horizontal scrolling problems */  
 @media (min-width:720px) {
   #main {
     max-width: unset !important;
     padding-right: 28px !important;
   }  
   addon-list>section,
   recommended-addon-list {
     padding: 1em !important;
     display: grid !important;
     grid-template-areas: "hd hd""cd cd" !important;
     grid-template-columns: 1fr 1fr !important;
     column-gap: 1em !important;  
   }  
   addon-card .card-contents {
     width: unset !important;
     white-space: initial !important;
   }  
   .card-heading-image {
     max-width: calc(100% + 32px) !important;
   }  
   section>h2 {
     grid-area: hd !important;
   }  
   addon-card {
     padding-bottom: 0px !important;
     padding-top: 0px !important;
     grid-area: auto !important;
   }  
   addon-card .addon-description {
     max-height: 3em !important;
     scrollbar-width: thin !important;
     color: white !important;
     text-align: inherit !important;
   }  
   .stack.inline-options-stack {
     background-color: #17171E !important;
     color: white !important;
     font-size: 14px !important;
     border: none !important;
   }  
   addon-card .addon-description {
     height: 3em !important;
     scrollbar-color: #1e90ff #000000 !important;
     scrollbar-width: thin !important;
   }
 }  
 .addon-badge-recommended,
 .addon-badge-private-browsing-allowed {
   transform: scale(0.85) !important;
   margin-bottom: 0px !important;
 }  
 #page-options panel-list {
   background-color: #17171E !important;
   font-size: 14px !important;
   border: none !important;
   color: white !important;
 }
}

樣式會(huì)立即生效，將擴(kuò)展列表改為雙欄顯示。

調(diào)試好了確認(rèn)無誤后，只需給該樣式命名然后保存即可。

如果你臨時(shí)不想用這個(gè)樣式了，可以點(diǎn)擊 StyloaiX 圖標(biāo)，然后直接點(diǎn)擊樣式名，就會(huì)取消選中該樣式，前面的圖標(biāo)會(huì)從〖打?的圓〗變成〖空心圓〗。

StyloaiX 的牛逼之處在于它可以渲染任何樣式，不管是 userChrome 還是 userContent，甚至可以直接使用它來替代 stylus 等擴(kuò)展。

使用自定義腳本管理自定義腳本

好了，體會(huì)到了自定義用戶腳本的強(qiáng)大之處后，我們來看看它還能實(shí)現(xiàn)什么神奇的功能，比如使用自定義腳本來管理自定義腳本？？？哈哈哈

什么意思呢？默認(rèn)情況下自定義腳本放到 chrome 目錄重啟后就會(huì)生效，要想讓它不生效，只能刪了它，或者重命名后綴，這也太不優(yōu)雅了。我們可以想辦法像 StyloaiX 一樣隨時(shí)啟用或禁用自定義腳本，不需要?jiǎng)h除腳本或者重命名后綴。

還是使用 xiaoxiaoflood/firefox-scripts[11] 這個(gè)倉(cāng)庫(kù)提供的方法，下載腳本 rebuild_userChrome.uc.js[12]，然后將其拷貝到 chrome 文件夾中，重啟瀏覽器之后就可以看到瀏覽器的工具欄中又多了一個(gè)擴(kuò)展的圖標(biāo)。

每一個(gè)腳本都有 6 種不同的操作方法，我就不解釋了，大家應(yīng)該都能看懂。

• ??注意：雖然使用該方法可以隨時(shí)〖啟用 / 禁用〗自定義腳本，但是某些腳本受瀏覽器的限制必須要重啟瀏覽器才能生效，具體需要自己測(cè)試。

使用自定義腳本管理瀏覽器擴(kuò)展

除了上面的玩法之外，我們還可以使用自定義腳本管理瀏覽器的擴(kuò)展，雖然某些瀏覽器擴(kuò)展也可以實(shí)現(xiàn)這個(gè)功能，但是使用自定義腳本更省資源，也更高效。這就需要用到另外一個(gè)大佬的倉(cāng)庫(kù) aminomancer/uc.css.js[13]，直接下載腳本 extensionOptionsPanel.uc.js[14]，然后將其拷貝到 chrome 文件夾的根目錄，重啟瀏覽器之后就可以看到瀏覽器的工具欄中又多了一個(gè)擴(kuò)展的圖標(biāo)。

現(xiàn)在你可以在同一個(gè)界面中管理所有的擴(kuò)展，包括啟用、禁用、設(shè)置、卸載等等。

關(guān)于自定義腳本的內(nèi)容我就講這么多，玩法太多，我就不一一列舉了，這篇文章只是提供一個(gè)方向，感興趣的玩家可以自己去探索。除了前面提到的兩個(gè)倉(cāng)庫(kù)之外，最后我再提供一些別人寫好的腳本資源：

• FirefoxTaskMonitor[15] : 實(shí)時(shí)顯示每個(gè)標(biāo)簽頁和每個(gè)擴(kuò)展的 CPU 和內(nèi)存使用狀況。
• Aris-t2/CustomJSforFx[16]
• FirefoxCSS on Reddit[17] : 前面提到過，這里除了可以分享樣式，還可以分享腳本。
• Firefox 擴(kuò)展、插件、腳本和樣式[18] : Firefox 中文社區(qū)的某個(gè)版塊。

如果大家對(duì)我的 Firefox 樣式和腳本比較感興趣，可以關(guān)注公眾號(hào)：

后臺(tái)發(fā)送暗號(hào)：firefox，即可獲取我的所有樣式和腳本。下載壓縮包之后將解壓出來的文件全部拷貝到 chrome 文件夾中即可，如果說有重復(fù)，則覆蓋它。

更多自定義選項(xiàng)

配置選項(xiàng)

〖配置選項(xiàng)〗也叫〖首選項(xiàng)〗，即 Preferences。通俗地說就是：Firefox 提供了一大堆可供用戶定制的參數(shù)。通過修改這些參數(shù)，可以對(duì) Firefox 進(jìn)行全方位定制。通常我們?cè)跒g覽器地址欄輸入 about:config 然后敲回車，就可以看到所有的配置選項(xiàng)。

例如，如果想改變滾動(dòng)體的樣式，可以打開 about:config，輸入 widget.non-native-theme.scrollbar.style，默認(rèn)值為 0，也就是自動(dòng)匹配當(dāng)前系統(tǒng)。我們可以指定某個(gè)具體的樣式，推薦用 1 和 5，這兩個(gè)最好看。

• 0 ：平臺(tái)默認(rèn)滾動(dòng)條樣式
• 1 ：macOS 滾動(dòng)條樣式
• 2 ：GTK 滾動(dòng)條樣式
• 3 ：Android 滾動(dòng)條樣式
• 4 ：Windows 10 滾動(dòng)條樣式
• 5 ：Windows 11 滾動(dòng)條樣式

配置選項(xiàng)的定制方法本文就不作具體說明，具體可參考這篇文章：掃盲 Firefox 定制——從“user.js”到“omni.ja”[19]。

user.js 的完整參數(shù)可參考 arkenfox/user.js[20] 這個(gè)倉(cāng)庫(kù)。

最后再介紹兩個(gè)對(duì)瀏覽器進(jìn)行個(gè)性化的方法，不過不是 Firefox 專屬的功能，Chrome 瀏覽器也是通用的。

油猴腳本

油猴腳本，正式的叫法是用戶腳本（user script）。之所以叫做〖油猴〗，是因?yàn)榈谝粋€(gè)制作這個(gè)瀏覽器擴(kuò)展的作者 Aaron Boodman  起名叫做 Greasymonkey，中文直譯就是〖油膩的猴子〗；后面其他腳本開發(fā)的時(shí)候，基本都在沿用 Greasymonkey  的一些基本規(guī)范，這些腳本也就統(tǒng)稱為〖油猴腳本〗了。

油猴腳本與前文所述的自定義用戶腳本不同，它只能對(duì)網(wǎng)站的功能進(jìn)行擴(kuò)展，無法對(duì)瀏覽器本身動(dòng)刀。

目前支持油猴腳本的瀏覽器擴(kuò)展有 Greasemonkey[21]、Tampermonkey[22] 和 Violentmonkey[23]，個(gè)人推薦使用 Violentmonkey，也就是暴力猴。安裝好擴(kuò)展之后，可以到 Greasyfork[24] 這個(gè)網(wǎng)站中去安裝自己感興趣的腳本。例如，很多人看到我的屏幕后都會(huì)問我是怎么上 Google 的，問的人太多了我就很煩，所以當(dāng)我們使用這個(gè)腳本[25]把 Google 的 Logo 換成百度，他們就不會(huì)問那么多問題了！

自定義網(wǎng)頁樣式

如果你不喜歡某些網(wǎng)站的樣式，也可以自己動(dòng)手給網(wǎng)站自定義樣式，原理還是通過 CSS 來實(shí)現(xiàn)。目前支持給網(wǎng)站自定義樣式的擴(kuò)展有 Stylish[26]、xStyle[27] 和 Stylus[28]，個(gè)人推薦使用 Stylus，其他兩款擴(kuò)展都停止開發(fā)了，不推薦使用。

安裝好擴(kuò)展之后，可以到 userstyles.org[29] 這個(gè)網(wǎng)站中去安裝自己感興趣的樣式。例如，我可以使用這個(gè)樣式[30]將 GitHub 的 Logo 改成 PronHub 的風(fēng)格。

如果 userstyles.org 中提供的樣式不能滿足你的需求，你也可以自己編寫樣式，一切皆有可能。

總結(jié)

本文給大家介紹了 Firefox 瀏覽器的優(yōu)勢(shì)，并使用自定義樣式和自定義腳本來對(duì) Firefox 瀏覽器進(jìn)行定制，制作屬于我們自己的專屬瀏覽器?？偟膩碚f，F(xiàn)irefox 就是一張紙，它什么都沒有，但每個(gè)人都可以培養(yǎng)只屬于自己的瀏覽器。Chrome 都是千篇一律，但 FireFox 各有各的不同。