沒穿方服

索引

顯示╱隱藏內文

看似簡單的 CopyTabTitleUrl (web extension), 其實有選項「Use Extended Edit Mode 🧪」可以打開實驗性功能,但數量也太膨大了吧🧪🧪🧪,看它 wiki 上的 format 說明,到底是怎麼發展成這個小天地的?

選單成果

我沒有全部看懂,但湊出一個 format 能夠將 URL 中的 fbclid 和 utm_source 等追蹤碼去掉:
${linkSrcUrl.replaceAll('[?&](fbclid|utm_\w+)=[^&#]+','')}


設定介面也很難懂,瘋狂科學家風格

選項畫面

貼圖記錄,十年後可以回來看古代 UI。

分頁群組太過搶眼

Firefox 138 開始支援分頁群組(Tab Groups),預設顯示是在群組下面劃一條線,結果有點太醒目,造成無法一眼辨認「目前分頁」在哪。

自救

我已經好久沒用 userChrome.css,先貼圖,詳細記在後面。

userChrome.css 內容

用法是到 about:config 開啟 toolkit.legacyUserProfileCustomizations.stylesheets,然後到 Profile 資料夾自己新增 chrome/userChrome.css 檔案。

主要策略是用 CSS color-mix() 把預設背景色調暗。 另外有把關閉按鈕拿掉,內容如下:

2026-06-20: Firefox 152 更新了定義,新版為:

.tab-background {
  &:is([selected], [multiselected]) {
    background-color: color-mix(in srgb, var(--tab-background-color-selected) 70%, black) !important;
  }
}

.tabbrowser-tab[selected] .tab-close-button {
  color: white !important;
}
.tabbrowser-tab[selected]:not(:hover) .tab-close-button {
  display: none !important;
}

以下為舊版,已經沒用了。

.tabbrowser-tab[selected] .tab-background {
  background-color: color-mix(in srgb, var(--tab-selected-bgcolor) 70%, black) !important;
}

.tabbrowser-tab[selected] .close-icon {
  color: white !important;
}
.tabbrowser-tab[selected]:not(:hover) .close-icon {
  display: none !important;
}

又寫了一支臉書用的 user script → Facebook 乾淨連結
原始碼也放在 GitHub。

連結污染

Facebook 對於外部連結,現在會用迂迴的方式竄改:網頁一開始顯示時,游標滑過連結還能在 tooltip 看到正常 URL,但點下去(不管左鍵、右鍵)或一些互動後,它會即時把連結變成 /l.facebook.com/l.php?u=原網址 這樣的轉址,讓你實際點到的是另一個 URL,這個感覺很噁心。

另外也會對連結附上 ?fbclid=... 這串很長的追蹤參數,要比較嚴謹地分享時,要刻意拿掉它也是很麻煩的。

既存替代方案

瀏覽器套件 ClearURLs 會移除所有網址中的追蹤碼。

差異在於我的 script:

  1. 就是只針對臉書。 utm_source 之類(Google 的追蹤碼)的不予理會
  2. 即時改網頁,而不是點擊連結後才用瀏覽器內部功能處理

立場

我不排斥追蹤,上網也從來不擋廣告。 單純是針對 Facebook。

之前鎖版很久,最近才升到後續維護的 smoka7/hop.nvim,發現 2023 年有推出一個叫 match mapping 的功能。

這個提案最早來自原版的 PR 235,看敘述我還真看不懂在幹嘛。

實際上是強化 HopChar1 這個指令,原本是輸入一個字,Hop 就會找出那個字出現的所有位置。
設定了 match_mappings = { 'zh_tc' } 後,會增加中文「拼音」對應,例如按 g 可以找到「乖工幹肛」這些字,鍵位與文字的對應表如 /lua/hop/mappings/zh_tc.lua 內容。

注音對應表

目前 hop 內建的表有波斯文(why!?)和中文,但中文只有拼音,我想改用注音,於是弄了一個
bootleq/hop-extend-match-mappings 專案。 參考全字庫整理出常用字,實作邏輯可參考 gen_tables.py.prompt.md。

實際使用例,要找黃偉哲的「ㄨㄟˇ」,就用 HopChar1 然後按 j(鍵盤ㄨ的位置):

HopChar1 → j (鍵盤ㄨ的位置)

點開報導者 The Reporter 的文章,有時會發現鍵盤 PageDown 不能滾動捲軸,毫無反應。

Chrome 的話 PageDown 可以用,但 Home End 還是壞的。

寫了一支 user script 自救,放在 Greasy Fork → 報導者優蛇 (twreporter-user) / 原始碼也有放在 GitHub

原理

起因是網站頂端搜尋列 (Search Bar) 輸入框有 autoFocus 設定,網頁技術用 React,輸入框錨上去後會搶走 focus,而瀏覽器行為會讓捲軸跟上,這是為什麼會捲到頂端。

又因為 focus 在輸入框,所以敲鍵盤也都被它吃掉,加上輸入框在畫面上還看不見,就變成鍵盤不理人的情形。

React 的 autoFocus 不同於標準 autofocus 屬性,DOM 裡面看不到,React 會自己模擬那個行為(你也不想每次 re-render 都 autofocus 吧)。

治本的方法是不要用 autoFocus,我有開一個 PR,但還未被處理。

補一下表態,報導者很多專題網頁都做超棒,也擁抱開源,契合組織理念,以開發者觀點我高度推崇。