前端前線 2026 年 6 月 18 日

2026-06-18 — Chrome 終結 MV2 擴充套件、CSS oklch() 色彩空間實戰解析 (2 articles)

primary=https://developer.chrome.com/docs/extensions/develop/migrate/mv2-deprecation-timeline primary=https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklch

Chrome 150 正式終結 MV2 擴充套件:uBlock Origin 等廣告阻擋工具走入歷史

Google Chrome Developers · 2026-06-15

Google 預計在 Chrome 150(預計 2026 年 6 月 30 日釋出)中移除 kExtensionManifestV2Disabled 旗標,這是目前允許 Manifest V2 擴充套件繼續運作的最後一道防線。緊接著的 Chrome 151(預計 2026 年 7 月)將徹底移除所有剩餘的 MV2 支援旗標。這一連串動作宣告了 uBlock Origin、Ghostery 等依賴 MV2 API 的廣告阻擋工具在 Chrome 上的終結。

MV2 淘汰時間軸回顧

Google 對 Manifest V2 的淘汰計畫可回溯至 2022 年。2022 年 6 月起,Chrome Web Store 即停止接受新的私有 MV2 擴充套件;2024 年 6 月,所有使用 MV2 的精選擴充套件遭移除精選徽章,並在 chrome://extensions 頁面出現警告橫幅。2024 年 10 月,Stable 頻道開始逐步停用 MV2 擴充套件,但當時使用者仍可手動重新啟用。

2025 年 3 月 31 日,MV2 擴充套件在所有 Chrome 頻道預設停用,一般使用者仍保有手動重啟的選項。同年 7 月 24 日(Chrome 138 釋出後),MV2 擴充套件在所有頻道全面停用,使用者無法再行啟用。企業版的 ExtensionManifestV2Availability 政策豁免也於 Chrome 139 移除,這是最後一道針對企業環境的緩衝機制。

Chrome 150 移除的是什麼?

根據 Chromium 工程師的說明,Chrome 150 移除的是「讓使用者得以繞過 MV2 停用措施的殘留程式碼(dead code)」。這些旗標原本作為緊急後門,讓有需求的使用者或開發者得以暫時繞過政策限制。移除後,即便透過 DevTools 介入,每次瀏覽器重啟後仍需手動重新套用,對日常使用而言不具可行性。Chrome 工程師明確表示:「MV2 擴充套件在任何受支援的 Chrome 版本中都不再被允許,我們正在移除對它們的支援。」

Manifest V3 的技術限制為何引發爭議

MV3 的核心爭議在於以 Declarative Net Request(DNR)API 取代了 MV2 的 webRequest API。前者採用靜態規則集模型,由瀏覽器引擎執行過濾邏輯,擴充套件本身無法動態攔截或修改請求內容。相較之下,webRequest 允許擴充套件在請求發出的即時點直接介入,這正是 uBlock Origin 等工具實現複雜語意過濾的基礎。

批評者指出,DNR 的靜態規則集上限(預設為 30,000 條靜態規則、5,000 條動態規則)雖在 MV3 後期版本中有所放寬,但仍無法完全對等複製 MV2 時代廣告阻擋的彈性。uBlock Origin 的作者 Raymond Hill 明確宣布不會移植完整功能至 MV3,並另行開發功能受限的 uBlock Origin Lite 版本作為替代。

Chromium 衍生瀏覽器與 Firefox 的因應

由於 Chrome 的政策僅約束 Google 自身的 Chromium 組建,Brave、Vivaldi、Opera 等 Chromium 衍生瀏覽器可自行決定是否延續 MV2 支援。Brave 已明確表示將繼續支援 MV2 擴充套件。Mozilla Firefox 亦維持對 MV2 的支援,並在其 Firefox 擴充套件生態系中持續相容舊有的 webRequest API。對於仍需完整廣告阻擋功能的使用者,切換至這些替代瀏覽器是目前最直接的解法。

原始來源:Google Chrome Developers — Manifest V2 deprecation timeline


CSS oklch() 色彩函數完整解析:感知均勻色彩空間的實戰應用

MDN Web Docs (W3C CSS Color Level 4/5) · 2026-06-18

CSS 的 oklch() 色彩函數自 2023 年 5 月起已在所有主流瀏覽器達到「Baseline Widely Available」狀態,代表 Chrome 111+、Firefox 113+、Safari 15.4+ 均已原生支援。它建構於 Oklab 色彩空間之上,以感知均勻(perceptually uniform)的方式描述顏色,解決了 HSL 等傳統模型在亮度調整時造成視覺不一致的問題。對於需要設計可訪問性色彩系統或程式化產生色階的前端開發者,oklch 提供了一個更符合人眼感知的操作介面。

三個參數:L、C、H 的定義與範圍

oklch() 接受三個主要參數,語法為 oklch(L C H) 或帶透明度的 oklch(L C H / A)L(亮度)範圍為 0 到 1(或 0% 到 100%),其感知均勻性意味著 L: 0.6 在任何色相下對人眼的亮度感受都相同,這是 HSL 的 lightness 無法保證的特性。

C(彩度,Chroma)的範圍為 0 到約 0.4,對應百分比時 100% 等於 0.4——這是一個非直覺的對應比例,需特別留意。彩度在接近純黑或純白時趨近於零,在中等亮度時達到峰值;同時,不同色相的可用彩度上限有所不同——人眼對綠色的敏感度較高,因此綠色系在相同彩度數值下顯得更鮮豔。H(色相)為 0 到 360 度的角度值,但其色相輪與 HSL 不同:紅色位於約 41°,而非 HSL 的 0°。

/* 基本語法範例 */
oklch(40.1% 0.123 21.57)       /* 暗紅 */
oklch(59.69% 0.156 49.77)      /* 橙色 */
oklch(59.69% 0.156 49.77 / .5) /* 橙色,50% 透明度 */

/* 調整同一色相的亮度梯度 */
[data-color="blue-dark"]  { background-color: oklch(10% 0.4 240); }
[data-color="blue"]       { background-color: oklch(50% 0.4 240); }
[data-color="blue-light"] { background-color: oklch(90% 0.4 240); }

相對色彩語法:以 calc() 動態衍生色彩

CSS Color Level 5 引入了相對色彩語法(relative color syntax),允許以既有顏色作為起點進行參數調整。語法為 oklch(from <color> L C H),其中 lch 為解析後的原始值,可搭配 calc() 做數學運算。這讓設計 token 系統變得更直觀:只需定義一個基準色,即可自動產生深色、淺色、低飽和度等變體。

:root {
  --base-color: orange;
}

#lighter { background-color: oklch(from var(--base-color) calc(l + 0.15) c h); }
#same    { background-color: var(--base-color); }
#darker  { background-color: oklch(from var(--base-color) calc(l - 0.15) c h); }

/* 調整透明度同樣直觀 */
oklch(from hsl(0 100% 50%) l c h / 0.5)

廣色域支援與 color-gamut 查詢

oklch 能夠表達超出 sRGB 色域的顏色,這對支援 Display P3 或 Rec.2020 的現代螢幕尤為重要。可用 CSS 的 @media (color-gamut: p3) 查詢來偵測裝置的色域支援情況,並提供對應的廣色域版本色彩方案。需要注意的是,指定超出目標裝置色域的 oklch 數值時,瀏覽器會進行 gamut mapping(色域映射),不同瀏覽器的實作行為可能略有差異。

下表整理了 oklch 三個參數的完整規格:

參數型別範圍說明
L<number><percentage>0–1(0%–100%)感知亮度;0 為黑,1 為白
C<number><percentage>0–0.4(0%–100%)彩度;100% 對應 0.4
H<number><angle>0–360°色相角;與 HSL 色相輪不同
A<alpha-value>0–1透明度;預設為 1(不透明)

對於需要建立無障礙設計色彩系統的開發者,oklch 的感知均勻性讓 WCAG 對比度計算更為可靠:在固定 L 值的條件下調整 H 時,對比度比率的波動幅度遠小於 HSL。搭配 oklch.com 等視覺化工具,可以直觀地在色相輪上挑選出視覺亮度一致的色彩組合,大幅降低人工驗證對比度的工作量。

原始來源:MDN Web Docs — oklch() CSS color function


End of article
0
Would love your thoughts, please comment.x
()
x