沒穿方服

這個新功能是什麼

就是古老 IE 每點一個連結，轉到新頁面時會「嗒」一聲的音效。

Noise 轉為 web extension 後就一直沒做這功能，因為時機太難判斷，之前用 webRequest + webNavigation + History API 怎麼配都弄不好，尤其在一些 SPA 或嵌入很多廣告的網頁，會發瘋叫個不停。

直到 Firefox 147 支援 Navigation API，雖然使用情境仍複雜，但有比較清楚的介面定義，至少能安心實作。

示例（影片有聲音）

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

很基本的功能，按下鍵盤 ↓ 或 PageDown 的時候應該要捲動網頁吧？ 為什麼沒捲呢？

因為 focus（焦點）不在你要捲動的東西上啊。 於是寫了一個套件 FocuScroll，可以設定快速鍵，按下去會修正焦點，讓捲動鍵發揮作用就是了。

主要精神是聚焦在可以捲動的主要內容上，我自己很常用，覺得對鍵盤瀏覽來說很重要。

---

• Firefox: addons.mozilla.org/firefox/addon/focuscroll
• Chrome: chrome.google.com/webstore/detail/focuscroll/jebflmhcpmdcelkmjkklapnebmafeelm
• 原始碼：github.com/bootleq/FocuScroll

---

舉例，有此現象的網頁：

1. Javadoc - Overview (Java SE 10 & JDK 10 )

   現在版本是 Java 10，一進去就會自動跳到「搜尋框」所以 PageDown 不會捲動； Java 8 之前的版本則是因為焦點一開始在 <frameset> 最外層，而不是最大那一塊 <frame> 內容，所以也不會動。

2. 內嵌 codepen 或 youtube 等等使用 <iframe> 的網頁，點了裡面按鈕，焦點就被吃進去，再按 PageDown 就不會捲動外面那層了。
   例如這邊放個跟捲軸有關的 youtube 影片，點播放以後 ↑ ↓ 就不能捲動這篇文章了。

---

原理和免責

如何找到真正要捲動的內容區塊？ 其實我還沒想到很好的方法，現在是從畫面中央的元素開始，透過一些硬做的規則搜尋，細節會改來改去，但原則是要通過一些已知形式，都寫在原始碼的測試中。 可以想見一定有支援不了的網頁，那就再加測試、再修正吧。

---

Firefox 設定快速鍵的方法

藏在擴充套件管理的小齒輪圖示，裡面的「管理鍵盤快速鍵」功能。

---

為什麼沒有人注意這個問題

鍵盤瀏覽比較會碰到這個問題，如果是用滑鼠滾輪，或筆電的觸控板滾動就不會遇到。

文件網站如 MDN、Microsoft Learn 有提供中文翻譯，有時候確實有幫助，像我就是看中文比較快。

但不是每個網頁都翻譯品質良好，差的時候，或者不確定差不差的時候就很尷尬，要切回原文確認，反而浪費時間。

有些領域則是已經習慣原文，但 google 搜到翻譯版連結，點進去反而陌生。

功能不親切的網站也是問題，例如 zh-hant.reactjs.org，要改語言就會離開目前主題（會跳去首頁）。

於是寫了一個瀏覽器套件 Delocalizer，它是 localize 的相反。

• Firefox: addons.mozilla.org/firefox/addon/delocalizer/
• Chrome: chrome.google.com/webstore/detail/delocalizer
• 原始碼：https://github.com/bootleq/delocalizer

提供一個工具列按鈕，「轉換目前頁面」會抓 URL 裡的 locale 部份（zh.xxx.com、xxx.com/zh/yyy），把它拿掉，再把 accept-language 請求標頭改成 en，讓網站吐英文。

也可以設定 xx 網站自動轉換，或者從 google 點連結才自動轉換。 以下是選項畫面：

---

隨意感想：

• 處在 Manifest V3 過渡期，轉移有爭議，時程也一延再延，但 v2 早就不允許上架了，局勢卡到發展。
• 兩個瀏覽器必須用不同 API（webRequestBlocking vs. declarativeNetRequest/DNR），DNR 適用範圍比較侷限，我寫的功能還算單純，也已經有遷就的感受了。
• Web extension API 從古（Firefox 57, 2017）至今沒什麼擴增，DOM 或 web 標準進展比較快，比較能帶來新東西。
• 有參考別人專案看怎麼開發，列出幾個： simple-translate、 tongwentang-extension、 bitwarden/clients、 facebook/react（它的 devtools-extension）。 觀摩有沒有人做 E2E 測試，不太有收穫，有看到一個 rally-core-addon 是用 Selenium，至於流行工具如 playwright 目前是不支援 Firefox 套件，所以也卻步了。
• 看到在 Chrome Web Store 上架要交一次 5 美金註冊費，但實際上架過程都沒出現要繳錢，狀態也變成「已發布 - 公開」，到底有沒有上架成功，使用者數量一直是 1（我自己）所以也不太確定。