/* ================================================================
✨ Firefox 推薦套件 – Neo-Brutalism (新粗野主義) 頁籤終極修復版
================================================================ */
/* ----- 0. 修正標題置中與預設對齊 ----- */
.my-article h1, .my-article h2, .my-article h3,
.my-article h4, .my-article h5, .my-article h6 {
display: block !important;
width: fit-content !important;
margin-left: auto !important;
margin-right: auto !important;
}
.my-article { text-align: left; }
/* ==========================================
🔑 1. 純 CSS 頁籤切換系統 (Radio Button Hack)
========================================== */
/* 把單選按鈕本身隱藏起來 (我們只透過 label 來點擊) */
.ff-tab-radio { display: none; }
/* 頁籤選單的外框配置 */
.my-article .my-tabs-nav {
display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; justify-content: center;
border-bottom: 4px solid var(--ink); padding-bottom: 24px;
}
/* 頁籤按鈕樣式 (把原本的 a 標籤改成 label) */
.my-article .my-tabs-nav .ff-tab-label {
display: inline-block; padding: 10px 20px; border-radius: 6px;
background: var(--paper-2); color: var(--ink); font-size: 15px; font-weight: 800;
cursor: pointer; transition: 0.2s ease;
border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink);
}
/* 頁籤按鈕滑鼠移過去的抬起與跳色效果 (Neo-Brutalism 的精髓) */
.my-article .my-tabs-nav .ff-tab-label:hover {
transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink);
background: var(--lime); color: var(--ink);
}
/* 🎯 關鍵邏輯：當對應的 radio 被選中時，把上面的 label 變成黃色 */
#ff-tab-1:checked ~ .my-tabs-nav label[for="ff-tab-1"],
#ff-tab-2:checked ~ .my-tabs-nav label[for="ff-tab-2"],
#ff-tab-3:checked ~ .my-tabs-nav label[for="ff-tab-3"],
#ff-tab-4:checked ~ .my-tabs-nav label[for="ff-tab-4"] {
background: var(--yellow);
transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink);
}
/* 內容區塊的大箱子 */
.my-article .my-tabs-container {
background: var(--paper); border-radius: 12px; padding: 32px;
border: 4px solid var(--ink); box-shadow: 8px 8px 0 var(--ink);
min-height: 400px; margin-bottom: 40px;
}
/* 預設把所有內容面板隱藏起來，並加上淡入動畫 */
.my-article .my-tab-panel { display: none; animation: fadeIn 0.4s ease; }
/* 🎯 關鍵邏輯：當 radio 被選中時，顯示對應的面板內容 */
#ff-tab-1:checked ~ .my-tabs-container .panel-1,
#ff-tab-2:checked ~ .my-tabs-container .panel-2,
#ff-tab-3:checked ~ .my-tabs-container .panel-3,
#ff-tab-4:checked ~ .my-tabs-container .panel-4 {
display: block;
}
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
/* ----- 2. 擴充套件卡片設計 (套用 Neo-Brutalism 配色) ----- */
.my-article .addon-card {
background: var(--paper-2); border: 3px solid var(--ink); border-radius: 8px;
padding: 20px; margin-bottom: 20px; transition: 0.2s;
box-shadow: 5px 5px 0 var(--ink);
}
.my-article .addon-card:hover {
transform: translate(-3px, -3px); box-shadow: 8px 8px 0 var(--ink);
}
.my-article .addon-card:nth-child(even) { background: var(--cream); }
.my-article .addon-title {
font-size: 19px; font-weight: 800; margin: 0 0 10px 0; color: var(--ink);
display: flex; align-items: center; justify-content: space-between;
}
.my-article .addon-desc {
color: var(--ink); font-size: 15.5px; margin-bottom: 12px; line-height: 1.7; font-weight: 500;
}
.my-article .addon-title a {
font-size: 14px; padding: 4px 12px; background: var(--pink);
border-radius: 4px; border: 2px solid var(--ink); color: #fff; font-weight: 800;
box-shadow: 2px 2px 0 var(--ink); text-decoration: none;
}
.my-article .addon-title a:hover {
background: var(--yellow); color: var(--ink);
transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--ink);
}
/* ----- 3. 圖片置中與裝飾 ----- */
.my-article .figure-center { text-align: center; margin: 32px 0; }
.my-article .figure-center img {
border-radius: 8px; box-shadow: 6px 6px 0 var(--ink);
border: 3px solid var(--ink); max-width: 100%; height: auto;
transition: 0.2s ease;
}
.my-article .figure-center img:hover {
transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--ink);
}
/* ----- 4. 手機版微調 (RWD) ----- */
@media (max-width: 600px) {
.my-article .my-tabs-nav .ff-tab-label { font-size: 14px; padding: 8px 12px; flex: 1 1 40%; text-align: center; }
.my-article .my-tabs-container { padding: 20px 16px; }
.my-article .addon-card { padding: 16px; }
.my-article .addon-title { flex-direction: column; align-items: flex-start; gap: 12px; }
}
🦊 讓火狐起飛！Firefox Quantum 必裝實用擴充套件大補帖
🔥 白話文前言：
大家升級到 Firefox Quantum（火狐瀏覽器的新引擎）之後，不可避免的就是有些舊的擴充套件（Add-ons，💯 就像是幫瀏覽器安裝的各種手機 App）不能用了 ❗
但別擔心，時代是向前進的，科技業更是不進反退，隨時都有可能出現新的黑科技！而且，能讓我們的網頁瀏覽效率大幅提升，才是重中之重啊 🤖🤓🤖！今天幫大家整理了將近 30 款超實用的套件，趕快來挖寶吧！
🟦 🟦 🟦
🧩 必裝套件分類百寶箱
💡 點擊下方按鈕切換不同類型的套件推薦喔！
🛡️ 隱私防護與廣告攔截
廣告滾～
💡 白話文：這就像是瀏覽器門口的超級警衛，幫你把所有煩人的廣告通通擋在門外！
另一套🚨 反反反廣告殺手 🥷
💡 白話文：專門抓那些突然彈出來的蓋版視窗，堪稱消滅網頁傳單的糾察隊。
這是一套可跨 FF、Chrome、Opera 三大平台，而且電腦或手機、平板皆可以同步的密碼管理器。用這個套件可以產生高強度的密碼，並帶有自動填寫的功能，好用度滿分！
💡 白話文：你的數位保險箱與萬能鑰匙，以後上網再也不用靠腦袋記密碼了。
WebRTC Leak Shield
[安裝] [12]禁用 WebRTC 防止泄漏真實 IP。
💡 白話文：幫你的網路連線穿上隱形斗篷，保護真實位置不被追蹤。
好用的代理伺服器（Proxy）工具。
💡 白話文：上網的任意門，讓你輕鬆切換不同國家的網路節點。
👁️ 視覺最佳化與閱讀體驗
將各種網站改變成黑色主題，適用於任何網站，也可以設定不變黑的網站。關愛眼睛，請使用 Dark Reader 👀
💡 白話文：等於是幫網頁戴上太陽眼鏡，半夜關燈滑網頁也不會被亮瞎眼！
繁體簡體中文網頁轉換工具。
💡 白話文：兩岸翻譯蒟蒻，一鍵把簡體字全部變成親切的繁體中文。
雙語翻譯擴充套件 🧐
💡 白話文：你的隨身貼身口譯員，看英文網頁時會同時保留中英雙語對照，超適合學語言！
這是一套可以跨三大平台的 PDF 工具，儲存網頁成 mhtml 不如存成 pdf。這套工具還可以自己編輯要顯示的部分，好用程度不輸 Evernote。
💡 白話文：網頁專用的剪刀漿糊，可以把不要的廣告區塊剪掉，再把乾淨的網頁印成 PDF。
🚀 瀏覽效率與分頁管理
smartUp Gestures
[安裝] [18]一套跨三大平台的瀏覽手勢套件。
💡 白話文：滑鼠的魔法魔杖，按住右鍵畫個 L 型就能關閉網頁，超級順手！
Group Speed Dial
[安裝] [19]一套跨三平台的快速撥號頁面 🍺
💡 白話文：就像手機的常用聯絡人，一打開新分頁就能看到你最常去的網站方塊。
一套跨三大平台的小工具，它可以自訂一個小箭頭在任何位置，方便網頁往上或往下滾動，或是前進到最下方、回到最上方，簡易好用～
💡 白話文：網頁直達電梯，看超長文章時一鍵就能回到頂樓。
Firefox Multi-Account Containers
[安裝] [21]火狐官方出品的帳號助手，可以用容器的概念來實現多開帳號登入網站（如臉書、推特等等）。
💡 白話文：影分身之術！讓你可以同時登入兩個不同的 FB 帳號，而且不會互相干擾。
Auto Tab Discard
[安裝] [22]這是一套凍結分頁來避免記憶體浪費的工具，它的按鈕在網址列，也可自訂時間自動凍結分頁。
💡 白話文：幫閒置的分頁蓋被子睡覺，釋放電腦記憶體（RAM），讓電腦不卡頓。
Auto Refresh Page
[安裝] [23]定時自動重新整理頁面，並且可以自訂監控功能 🦾
💡 白話文：搶票必備的不知疲倦 F5 連發機器人！
有些網頁上的網址是沒有超連結的，裝了這個套件之後，點兩下一樣能打開網址。
💡 白話文：幫死板的純文字網址裝上傳送門，省去複製貼上的麻煩。
就是清除快取的啦。
💡 白話文：快取就像是便利商店的常溫貨架，這套件就是一鍵幫你把貨架上過期的東西清空，確保看到最新網頁。
📺 影音社群與開發輔助
Black Menu for Google™
[安裝] [27]一套跨三大平台的整合 Google 服務套件。
💡 白話文：Google 服務的百寶箱，不用開新網頁就能快速存取雲端硬碟或翻譯。
跨三大平台的黑科技，雖然罵聲不少，但其便利性還是值得使用 BJ4。
💡 白話文：瀏覽器的外掛引擎（渦輪增壓），可以安裝各種神人寫的腳本來改造網頁。
EverSync 書籤同步套件
[安裝] [29]又是一套跨三大平台的書籤工具，不裝就弱了～
電子信箱管理員，支援度很高，而且可以直接點擊登入各信箱的 gmail，這是我最欣賞的功能。
💡 白話文：你專屬的郵差，有新信件馬上通知你。
Checker Plus for Gmail
[安裝] [31]專門處理 Gmail 的工具，可以同時處理多個信箱唷~
我最常用它的檢視網頁圖片功能。很多網頁把圖片寫在 css 裡，或是各種怪異手法阻擋了，搞得想要下載圖片都辦不到（想偷圖真的好難？），而只要用 Web Developer 把圖片彙整出一頁，就可以輕鬆下載了 🤣
💡 白話文：網頁的 X 光機，一眼看穿所有被隱藏或鎖右鍵的圖片！
Iridium for YouTube
[安裝] [34]看 YouTube 很方便的小工具，最愛它的反向播放清單功能。
Youtube Subscription Manager
[安裝] [35]整理 Youtube 的訂閱內容的小工具。
Twitter View Original Images
[安裝] [36]看 Twitter 很方便的小工具。
💡 白話文：網站的身分證掃描器，一看就知道這個網站在哪個國家。
🟥 🟥 🟥
🔥 額外推薦與進階教學：打造終極無廣告體驗
除了上面的套件，站長特別額外推薦 Nano Adblocker [39]！這是一款🚨 反反反廣告殺手。因為現在很多網站為了廣告收益，會限制安裝 UBO (uBlock Origin) 或 AdBlock 的用戶，不關閉就不給看。這時候就該 Nano Adblocker 閃亮登場了！但是要注意，它需要手動增加並啟用第三方過濾規則。
⚠️ 防雷警告：
★☆★☆★ 請注意 ★☆★☆★
本人僅推薦 uBlock Origin (UBO) 使用者跟著以下步驟操作，無法保證其他反廣告套件使用者也能正常運作喔！
- ❶ 第一步：訂閱必要的過濾清單
請依序點擊下方連結進行訂閱（💯 這就像是幫警衛更新最新的黑名單資料庫）：
- ❷ 第二步：修改 UBO 進階設定
接著在 UBO 的設定中，先勾選「我是進階使用者」，然後點右手邊的齒輪 ⚙️ 進入進階設定，將 userResourcesLocation 後方的設定值改成下列網址： https://raw.githubusercontent.com/NanoAdblocker/NanoFilters/master/NanoFiltersSource/NanoResources.txt
- ❸ 第三步：(選用) 額外推薦的第三方過濾規則
如果有需要，可以再把這些規則加進去，防護更全面：
🔖 參考來源：Nano Defender (a.k.a. uBlock Protector) [50]
🟧 🟧 🟧
📚 更多精選與總結
大致上必裝的就是這些啦！如果大家還想尋寶，其他有玩過的套件我都放在 👉 火狐官網的收藏集 [51] 裡面。
另外，如果對 Tampermonkey 擴充套件（傳說中的腳本黑科技）特別感興趣的朋友，請參考這篇專文 👉 常用的 Chrome 擴充套件、Stylish、Tampermonkey [52]。
列印本文 [53]
👨👩👧👦 8 次瀏覽 
