Category: Browser

uBlock Origin 1.48.0 的改善

Hacker News 上看到「uBlock Origin 1.48 adds readiness status, code viewer, and other fixes (github.com/gorhill)」這則消息，uBlock Origin 在 1.48 有個蠻重要的 UI/UX 改善 (Readiness status at browser launch)。

uBlock Origin 預設會搭配「工人智慧」維護的列表，這些列表通常都不小，在剛開瀏覽器，還在讀取的過程中去看網站會遇到阻擋不完整的情況。

先前沒有辦法知道這個問題，在這版加上了對應的 icon color 來解決，黃色表示還在讀：

這時候跑去逛網站的話會出現驚嘆號：

讀取完後 icon 會變成標準的紅色，但驚嘆號仍然會留著，表示這個頁面未必有完整過濾：

正常有阻擋的則是這樣：

理論上可以減少 bug report XDDD

To reduce the number of reports caused by this issue which is outside of uBO's control, uBO's toolbar icon will now reflect its readiness status at browser launch.

在 CSS 裡面使用系統字型的選擇

一開始是看到「Show HN: Modern Font Stacks – New system font stack CSS for modern OSs (modernfontstacks.com)」這個，專案希望可以使用不用另外下載的字型 (系統內建字型)，但這個網站本身不好用，留言區提到的一些其他網站好用多了...

首先是「CSS Font Stack: Web Safe and Web Font Family with HTML and CSS code.」這個，把 Windows 與 macOS 上預設的字型都列出來，然後也列出對應的安裝比率。

而另外一個則是在 GitHub 上的專案「Modern Font Stacks」，把類似的字型放在一起。

看起來可以參考，比起只用 serif 或是 sans-serif 來說會多一些變化可以用。

WebKit 要支援 nested CSS 了

從龍哥這邊看到的消息，WebKit 要支援 nested CSS 了：

原文在「Try out CSS Nesting today」這邊，就是這樣的寫法：

.foo {
  color: green;
 .bar {
    font-size: 1.4rem;
  }
}

這個在很多預處理的工具都會支援，然後編譯成展開的形式。

比較特別的是在 nested CSS 中不支援 element 的指定：

main {
 article { ... }
}

他寫的理由我是看不太懂：

That code will fail, because article begins with a letter, and not a symbol. How will it fail? The same way it would fail if you’d misspelled article as atirlce. The nested CSS which depends on that particular selector is simply ignored.

反而要用個奇怪的設計去繞開：

main {
 & article { ... }
}

這邊是真的沒看懂在閃什麼問題...

CSS 的 feature detection：@support

在「Conditional CSS」這篇裡面在講很多 CSS 條件過濾的方式，裡面看到有 @support 這個規格，可以透過 feature detection 的方式來過濾：「CSS at-rule: @supports: selector()」。

文章作者給的範例是這樣：

@supports selector(:has(p)) {
  .card-thumb {
    aspect-ratio: 1;
  }
}

在瀏覽器支援 :has(p) 的情況下才指定裡面的 CSS。

翻了一下 @support 在各家瀏覽器上實做的情況：在 Firefox 上是 69 開始支援，推出的日期是 2019/09/03。在 Chrome 上是 83 開始支援，推出的日期是 2020/05/19。在 Safari 上是 14.1 開始支援 (對應到 iOS 版本是 14.5)，推出的日期是 2021/04/26。

從日期可以看出來算是比較新的功能，但主要幾個大的瀏覽器都支援了。

這個讓我想起來早期利用各家瀏覽器的 bug 產生出的各種 hack：「Browser Specific Hacks」。

FBI 建議用擋廣告軟體降低瀏覽時的風險

在「Even the FBI says you should use an ad blocker」這邊看到的新聞，FBI 的公告則是在「Cyber Criminals Impersonating Brands Using Search Engine Advertisement Services to Defraud Users」這邊可以看到。

起因是有很多網路犯罪行為會透過購買廣告，在搜尋引擎上曝光誘導使用者點擊：

Cyber criminals purchase advertisements that appear within internet search results using a domain that is similar to an actual business or service. When a user searches for that business or service, these advertisements appear at the very top of search results with minimum distinction between an advertisement and an actual search result. These advertisements link to a webpage that looks identical to the impersonated business’s official webpage.

其中一種方式是，使用者輸入關鍵字想要下載某些特定的軟體，這時候網路犯罪者就會透過下廣告的方式，誘導使用者到假的網站下載有後門木馬的軟體：

In instances where a user is searching for a program to download, the fraudulent webpage has a link to download software that is actually malware. The download page looks legitimate and the download itself is named after the program the user intended to download.

這個方式讓我想到之前北韓政府對 PuTTY 的攻擊：「Trojanized versions of PuTTY utility being used to spread backdoor」。

而 FBI 建議個人的保護方式包括了 ad blocking extension，這算是減少被攻擊的管道：

Use an ad blocking extension when performing internet searches. Most internet browsers allow a user to add extensions, including extensions that block advertisements. These ad blockers can be turned on and off within a browser to permit advertisements on certain websites while blocking advertisements on others.

然後建議擋廣告軟體就是用 uBlock Origin，無論是 Chromium 系列的瀏覽器 (包括 Google Chrome)，或是 Firefox 都有支援。

jQuery 3.6.2

看到 jQuery 出新版的消息：「jQuery 3.6.2 Released!」。

這個版本的說明裡面針對了 :has() 這個功能著墨，主要還是因為這功能 jQuery 支援很久了，而 Chromium 與 Safai 在最近都開始支援了：「Issue 669058: CSS selectors Level 4: support :has()」、「Using :has() as a CSS Parent Selector and much more」。

不過看起來 jQuery 要整合原生的 :has() 還是有技術困難，因為裡面可能會包括 jQuery 自己定義的 selector extension：

That was problematic in cases where :has() contained another jQuery selector extension (e.g. :has(:contains("Item"))) or contained itself (:has(div:has(a))).

總之，難得又看到 jQuery 的消息... 前一版的 3.6.1 是 2022/08/26，而 3.6.0 則是再一年多前的 2021/03/02，再往前面是 3.5.1 的 2020/05/04 與 3.5.0 的 2020/04/10。

是個歷史...

Mozilla 推出在本地端直接翻譯的 Firefox Translations

Mozilla 推出了「Firefox Translations」這個 Firefox 上的套件。

主打的就是 offline 這件事情，保有隱私性：

Firefox Translations provides automated translation of web content. Unlike cloud-based alternatives, translation is done locally, on the client-side, so that the text being translated does not leave your machine.

從 Hacker News 上的討論「Firefox Translations: Translate websites in your browser without using the cloud (addons.mozilla.org)」可以看到有些人有提到效果，雖然沒有像雲端服務的準確，但算是可用：

I've just installed it, and I'm impressed so far. I've only run it against some sample German Wikipedia articles (https://de.wikipedia.org/wiki/Clan_of_Xymox), but it produces surprisingly readable text. I also particularly like the "highlight potential errors" option to flag stuff that even the translation service thinks might be a bit off.

It's not nearly as speedy as Google Translate, but I'll take that happily if it means keeping it local.

從頁面上列出的支援語言可以看出還是以歐美用到的語系為主，然後下方也有說明這個專案是包括其他計畫的贊助累積出來的：

Firefox Translations was developed with The Bergamot Project Consortium, coordinated by the University of Edinburgh with partners Charles University in Prague, the University of Sheffield, University of Tartu, and Mozilla. This project has received funding from the European Union’s Horizon 2020 research and innovation programme under grant agreement No 825303.

不過比較好奇的是在頁面上有提到 CPU 需要 SSE4.1 能力... 這樣就有兩個問題了，第一個是 browser extension 可以直接跑 SSE4.1 指令集？另外一個疑問就是，Apple 的 ARM 架構就無法支援嗎 (應該也有類似的加速指令集)，現在是 x86 限定？

A CPU that supports SSE4.1 extensions is required for this addon to function properly. If it doesn't, an error will be displayed when the translation is being started.

就算現在限制很多，看起來還是個很有前途的計畫，也許有機會移植到其他瀏覽器上？

透過 CSS 達到可折疊的 tree view

在 Hacker News 上看到「Tree views in css」這篇，講怎麼用純 CSS 技巧達到可折疊的 tree view：

主要是用了 ul 與 li 的 html 結構來搭建 tree view 的意義，再透過 <summary> 與 <details> 這兩個本身就有 toggle 能力的元素來操作展開與收合，後面就是 visual effects 的設計了。

從 Can I use 這邊可以看到支援度沒什麼問題 (連 Android 4.4 的 WebView 都支援)，除非你還得跟 IE11 奮戰：「Details & Summary elements」。

SQLite 官方自己下來搞 WASM/JS 計畫

先前在「把 SQLite 的 VFS 掛上 WebTorrent 的 PoC Demo」有提過 sql.js 這個專案，把 SQLite 移植到網頁上，這些都算是非官方的社群弄出來的專案。

現在官方直接跳下來玩，宣佈自己也要搞 WASM/JS 了：「sqlite3 wasm docs: About the sqlite3 WASM/JS Subproject」。

Folks have been building sqlite3 for the web since as far back as 2012 but this subproject is the first effort "officially" associated with the SQLite project, created with the goal of making WASM builds of the library first-class members of the family of supported SQLite deliverables.

但不太確定 D. Richard Hipp 的想法，官方支援 WASM/JS 的目的會是什麼？放給社群繼續發展有什麼問題嗎...

uBO Lite：另外一個方向的嘗試

兩個禮拜前在 Hacker News 上看到的東西，算是 uBlock Origin 對 Manifest V3 (MV3) 的另外一種嘗試：「uBlock Origin Lite: Description (github.com/gorhill)」，專案的說明在「uBO Lite (uBOL), an experimental permission-less MV3 API-based content blocker.」這邊。

先前在「因應 Manifest V3 而推出的 uBlock Minus (MV3)」這邊提到的 uBlock Minus 是在 MV3 環境下的一個嘗試，但這個版本只是把 MV3 做不到的事情先拔掉，所以缺了很多重要的功能，像是 cosmetic filtering (主要是針對瀏覽器不支援的 css selector，像是最近才剛支援的 :has()，而這些 css selector 對於選擇要幹掉的 html 元素很好用)。

uBO Lite 則是一個妥協，另外讓使用者對特定站台點選授權，而在這些特定授權的站台可以恢復到原來 MV2 時可以過濾的能力 (包含 cosmetic filtering 等等的能力)：

但這個方案也是 Google 所樂見的，只要不方便就會讓使用者慢慢放棄。

目前的公告提到 MV2 只支援到明年一月，大概還有三四個月的時間，接下來 adblock 這塊應該會有很多新的方法陸陸續續冒出來...