iceorange-dev / bilibili-ambilight

# Bilibili 環境光（Ambient light for Bilibili）
在 Bilibili 影片周圍加上環境光（Ambilight）效果。同一個原始碼可以建置成兩種版本：
- **瀏覽器擴充功能**（Chrome / Edge / Firefox）
- **使用者腳本**（Tampermonkey / Violentmonkey / Greasemonkey 等「篡改猴」類管理器）
介面支援繁體中文、简体中文、English、日本語、한국어（預設跟隨瀏覽器語言，可在設定選單的「語言」變更）。
> 本專案為非官方的第三方擴充功能，與嗶哩嗶哩（Bilibili）及 YouTube 無關。
本專案是 Ambient light for YouTube™（作者 Wessel Kroos，MIT License）的 Bilibili 移植版。渲染引擎（WebGL / Canvas2D 投影、黑邊偵測、統計）沿用原專案，網站整合的部分則改寫給 Bilibili 使用。
## 支援的頁面
- `https://www.bilibili.com/video/*`（一般影片、分 P）
- `https://www.bilibili.com/bangumi/play/*`（番劇／影視，DRM 保護的影片無法顯示環境光）
- `https://www.bilibili.com/list/*`、`/medialist/play/*`（播放清單）
- `https://www.bilibili.com/festival/*`、`/cheese/play/*`
支援播放器的所有模式：一般、寬螢幕、網頁全螢幕、全螢幕，以及 B 站的「鏡像畫面」設定。往下捲動出現小窗播放器時只會隱藏環境光，深色主題與融入背景的效果會保留。
## 安裝（使用者腳本／篡改猴）
1. 安裝使用者腳本管理器：Tampermonkey（Chrome / Edge / Firefox）、Violentmonkey 或 Greasemonkey
2. 安裝腳本：
 - 直接點安裝網址（Raw）：`https://raw.githubusercontent.com/iceorange-dev/bilibili-ambilight/userscript/bilibili-ambilight.user.js`
 - 如果連不上 `raw.githubusercontent.com`（例如在中國大陸），可以改用 jsDelivr 鏡像：
 `https://cdn.jsdelivr.net/gh/iceorange-dev/bilibili-ambilight@userscript/bilibili-ambilight.user.js`
 - 管理器會從安裝時的網址檢查更新，所以用哪個網址安裝，之後就會從哪個網址更新
 - `userscript` 分支只放正式版本：每次發佈新版時由 CI 建置並更新
 - 或自己建置（見下方），再把 `bilibili-ambilight.user.js` 拖進瀏覽器，或在管理器中新增腳本後貼上內容（這樣安裝的不會自動更新）
3. 重新整理 Bilibili 影片頁面
Chrome / Chromium 核心的瀏覽器請確認已開啟擴充功能的「開發人員模式」，以及在管理器中允許使用者腳本執行（詳見 Tampermonkey 官方說明）。
> 使用者腳本的中繼資料（`@namespace`、`@homepageURL`、`@icon`）來自 `package.json` 的 `userscript` 欄位，預設指向專案首頁。如果要發佈到自己的 fork，把 `userscript.namespace`／`userscript.homepage` 改成你的 repo，再重新執行 `npm run build:userscript` 即可（`bilibili-ambilight.user.js` 是建置產物，不要手改）。
使用者腳本版**沒有擴充功能的工具列圖示與選項頁面**，因此：
- 環境光的設定一樣在播放器控制列（齒輪按鈕左邊的「光芒螢幕」圖示）
- 匯出／匯入設定、開關環境光、開啟設定選單、重設所有設定，改從**使用者腳本管理器的選單**（點 Tampermonkey 圖示 →「Bilibili 環境光」）操作
- 設定儲存在使用者腳本管理器自己的儲存空間（`GM_setValue` / `GM_getValue`）；管理器缺少這些 API 時會退回 `localStorage`
## 安裝（瀏覽器擴充功能，開發者模式）
需要 Node.js 22 以上。
 [code] 
1. Chrome / Edge：開啟 `chrome://extensions`，打開「開發人員模式」
2. 點「載入未封裝項目」，選擇 `dist` 資料夾
3. 重新整理 Bilibili 影片頁面
Firefox：改用 `npm run build:firefox` 建置（Firefox 的 manifest 需要 `background.scripts`，Chrome 則只接受 `background.service_worker`），再開啟 `about:debugging#/runtime/this-firefox` →「載入暫用附加元件」→ 選擇 `dist/manifest.json`。
使用者腳本：`npm run build:userscript` 會把整個擴充功能打包成單一檔案 `bilibili-ambilight.user.js`（建置產物，不會提交進 repo；正式版本由 CI 發佈到 Release 與 `userscript` 分支）。它會把樣式表與除雜訊貼圖（`src/images/noise-*.png`）內嵌進檔案，所以檔案比較大（約 1.5 MB）。
## 使用方式
- 播放器右下角的控制列中，B 站設定（齒輪）按鈕左邊的「光芒螢幕」圖示就是環境光設定選單
- 快捷鍵（可在設定選單中修改）：
 - `G`：開啟／關閉環境光
 - `B`：自動移除上下黑邊（預設關閉，因為燒在上下黑邊裡的字幕也會被裁掉）
 - `V`：自動移除左右黑邊（預設開啟）
 - `H`：將影片放大填滿移除黑邊後的空間
- 預設在開啟環境光時會把頁面切換成深色主題。可在「基本設定 → 外觀（主題）」改成「跟隨 B 站」或「淺色」
- 設定選單的「沉浸」區塊：
 - 頁首與搜尋框融入背景：頁面在最上方時導覽列透明，往下捲動後變成半透明模糊；搜尋框融入背景（預設開啟）
 - 寬螢幕模式時隱藏頁首：寬螢幕模式且在頁面最上方時隱藏導覽列
 - 右側欄融入背景：右側的彈幕列表、選集／合集清單、關注與訂閱合集按鈕融入背景（預設開啟）
 - 彈幕輸入列融入背景：影片下方的彈幕輸入列融入背景（預設開啟）
 - 影片資訊與留言區融入背景：影片標籤與留言輸入框融入背景（預設開啟）
 - 融入背景的元素透明度都跟隨「頁面內容 → 按鈕與區塊背景不透明度」
## 語言
介面支援 5 種語言，預設跟隨瀏覽器語言：
| 語言 | 程式碼 | 檔案 |