手把手教你打造全宇宙更強的專屬 Firefox 瀏覽器

作者：米開朗基楊 2022-06-30 11:14:02

本文給大家介紹了 Firefox 瀏覽器的優(yōu)勢，并使用自定義樣式和自定義腳本來對 Firefox 瀏覽器進(jìn)行定制，制作屬于我們自己的專屬瀏覽器。

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

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

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

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

Firefox 的優(yōu)勢

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

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

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

Chrome 有這個可能嗎？

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

Chrome 有這本事嗎？

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

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

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

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

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

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

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

自定義用戶樣式

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

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

之后打開的文件夾即為 Firefox Profile 根目錄。在這里，我們需要創(chuàng)建一個名叫 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 這兩個樣式定義文件，在其中進(jìn)行自定義即可。

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

userChrome.css 是專門用來定制 Firefox〖自身的界面〗（比如 Firefox 自己的“地址欄、搜索欄、快捷菜單、滾動條 ......”）
userContent.css 是專門用來定制 Firefox 瀏覽的網(wǎng)站的界面（如果你對我博客的某些界面效果不爽，就可以用它來定制）。說白了，userContent.css 可以實現(xiàn)和 stylus 這一類擴展同樣的功能，唯一的區(qū)別在于 userContent.css 還可以定制 Firefox 內(nèi)置頁面和擴展頁面的樣式（比如內(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è)計風(fēng)格的 Firefox 主題，將 Firefox 標(biāo)簽頁的樣式打磨得和 Chrome 圓角標(biāo)簽頁近乎一致。

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

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

firefox-csshacks[4] : 這個倉庫包含了各種特定的樣式，其中 chrome 文件夾包含了 userChrome.css 的樣式，content 文件夾包含了 userContent.css 的樣式。

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

感興趣的小伙伴可以自己下載體驗一番。

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

自定義用戶腳本

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

在 Firefox 72+ 之后，用 JavaScript 添加附加功能的步驟稍微有些繁瑣。可以參考 xiaoxiaoflood/firefox-scripts[6] 這個倉庫的方法，

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

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

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

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

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

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

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

例如，如果你想實時調(diào)試自定義樣式，可以使用 xiaoxiaoflood/firefox-scripts[9] 倉庫里的 StyloaiX 腳本，它比 userChrome.css 和 userContent.css 更方便，因為它擁有一個強大的編輯器，還能即時預(yù)覽、錯誤檢查、代碼自動補全，而且無需重啟瀏覽器即可啟用和禁用樣式。你只需要下載壓縮包 styloaix.zip[10]，然后將解壓出來的文件全部拷貝到 chrome 目錄中：

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

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

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

然后就會打開一個編輯器的界面。

然后就可以在里面調(diào)試樣式了。比如我想對擴展界面進(jìn)行自定義，就可以選擇〖New Style〗--> 〖For this page〗，打開編輯器后會自動幫你設(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;
 }
}

樣式會立即生效，將擴展列表改為雙欄顯示。

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

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

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

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

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

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

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

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

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

使用自定義腳本管理瀏覽器擴展

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

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

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

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

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

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

總結(jié)

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

責(zé)任編輯：龐桂玉來源：奇妙的Linux世界

Firefox 瀏覽器

手把手教你打造全宇宙更強的專屬 Firefox 瀏覽器

Firefox 的優(yōu)勢

自定義用戶樣式

自定義用戶腳本

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

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

使用自定義腳本管理瀏覽器擴展

更多自定義選項

配置選項

油猴腳本

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

總結(jié)