❤️ 書籤庫與浮動互動面板（Bookmark Vault & Hover Panel）

PRO 功能：滑鼠停留即召喚互動面板，讓你的影片收藏井然有序。

1. 浮動互動面板（Hover Panel）詳解 🎯

浮動互動面板是 V-Train PRO 最直覺的功能之一。當你在影片播放頁面上，150 毫秒後，一個小型互動面板就會悄悄出現。

📍 小影片縮圖上不會出現

浮動互動面板只會出現在影片播放頁面，在影片列表頁的縮圖上停留就不會觸發面板。

面板包含以下按鈕：

按鈕	功能
喜歡(Like) 👍	為這部影片按讚（評分正面）
不喜歡(Dislike) 👎	標記不喜歡（評分負面）
收藏(Bookmark) ❤️	收藏到書籤庫（可選擇資料夾）
截圖(Screenshot) 📸	擷取目前縮圖作為封面截圖
書籤庫(Open Vault) 📚	直接開啟書籤庫管理介面

面板位置可以拖拉！

如果預設的面板出現位置不合你的習慣，你可以 拖拉面板 到任何你喜歡的地方。V-Train 會把新位置儲存到 vt_panel_pos，之後每次開啟都會記住你調整過的位置。

PRO 功能說明

浮動互動面板與書籤庫均為 V-Train PRO 專屬功能。免費版用戶可以在升級後立即使用，現有的書籤資料會完整保留。

2. 評分功能（👍 喜歡 / 👎 不喜歡）⭐

什麼是評分？

評分讓你快速標記對這部影片的喜好，就像在你的腦海裡貼上「值得看」或「不感興趣」的便條紙。

如何評分？

將滑鼠移到影片縮圖上，等待面板出現
點擊 👍 表示喜歡，點擊 👎 表示不喜歡
評分立即儲存，無需額外確認

評分的視覺顯示

評分完成後，縮圖上會出現一個 小徽章（Badge）：

👍 大拇指朝上 → 表示你按過讚（Like）
👎 大拇指朝下 → 表示你標記為不喜歡（Dislike）

這樣即使下次瀏覽同一頁面，你也能一眼看出哪些影片你已經看過並評分。

改變心意？

再次點擊相同評分按鈕即可 取消評分。點擊另一個評分則直接切換。

3. 收藏到書籤庫（❤️ + 資料夾選擇）📁

收藏流程

在影片播放頁面上，面板出現後點擊 ❤️
彈出 資料夾選擇器，顯示你的資料夾樹狀結構
點選目標資料夾（或點「根目錄」不分類儲存）
收藏完成！

收藏小提醒

收藏面板只會在影片播放頁面出現，在影片列表頁縮圖上無法直接收藏。

遇到破圖或無封面的情況？ 若點擊收藏後發現書籤的封面呈現「破圖」或空白，這並非系統故障，而是該網站基於特殊的版權或防護規則，故意將影片封面隱藏起來了。碰到這類嚴格限制的網站時，推薦使用終極解法：先將影片播放到精彩或具代表性的畫面，然後點擊互動面板上的 「📸 截圖封面」 按鈕。V-Train 會直接擷取當前播放器的畫面作為專屬封面，輕鬆解決封面抓不到的困擾！

書籤的完整資料結構

每個書籤儲存的資訊包含：

json

{
  "id": "唯一識別碼",
  "videoId": "影片 ID（從 URL 規則擷取）",
  "url": "影片完整網址",
  "title": "影片標題",
  "thumbnail": "封面圖片 URL 或截圖",
  "folderId": "所在資料夾的 ID",
  "domain": "網站網域（如 youtube.com）",
  "addedAt": "收藏時間戳記"
}

為什麼要儲存 videoId？

V-Train 使用 videoId 來識別「這個書籤和這個縮圖是同一部影片」。這讓書籤庫可以在不同頁面、不同網址格式下正確顯示對應的封面與評分徽章。

4. 截圖封面功能（📸）🖼️

什麼是截圖封面？

點擊 📸 按鈕時，V-Train 會嘗試把這部影片的縮圖「存」下來，作為書籤的永久封面。

這個功能解決了一個常見問題：許多網站的縮圖 URL 會過期，或因防盜鏈機制而無法在書籤庫中正常顯示。

截圖的技術流程

V-Train 使用以下流程擷取封面：

優先嘗試 Canvas/Video 擷取：直接對頁面上的縮圖元素進行 canvas 截圖
如果失敗，嘗試 OG Image：從頁面的 <meta property="og:image"> 標籤取得官方分享圖
第二道截圖防線 (動態右鍵變身)：由於少數網站設有嚴格的跨網域廣告干擾或 CORS 限制，一鍵截圖可能會失敗並出現紅色「❌」。此時按鈕上方會彈出紅色提示，只需依照指示對網頁按滑鼠右鍵並點擊「📸 V-Train: 強制物理截圖」，系統便會取得當前分頁的最高權限 (activeTab)，穿透所有限制強行擷取畫面。
壓縮處理：擷取的圖片會壓縮為 320px 寬的 WebP 格式，平衡畫質與儲存空間
存入 IndexedDB：壓縮後的圖片存入瀏覽器本地的 IndexedDB 資料庫（vt_thumbnails store）

截圖存在哪裡？

截圖存在你的 瀏覽器本地 IndexedDB 中，不會上傳到任何伺服器。這意味著截圖只在你這台電腦上可用，不會隨 Chrome 帳號同步到其他裝置。

注意儲存空間

如果你收藏了大量影片並都截圖，IndexedDB 的空間占用可能會增加。建議定期清理不再需要的書籤。

5. 書籤庫管理介面 📚

如何開啟書籤庫？

有兩種方法：

從浮動面板：點擊 📚 圖示
從 V-Train Popup：點擊擴充功能圖示 → 找到「書籤庫」按鈕

介面功能一覽

書籤庫提供完整的管理功能：

功能	說明
格狀視圖（Grid View）	大縮圖卡片排列，一目了然
列表視圖（List View）	緊湊的列表格式，顯示更多資訊
排序	依最新、最舊、或標題排序
搜尋	即時關鍵字搜尋
資料夾樹	左側資料夾導航
麵包屑導航	顯示目前所在的資料夾路徑
分頁	每頁顯示 12 個書籤，適配各種螢幕

6. 資料夾系統 📂

建立資料夾

在書籤庫左側的資料夾樹中，點擊「新增資料夾」按鈕即可建立。資料夾支援 無限層級巢狀，讓你可以打造類似這樣的結構：

📁 動畫
  📁 2024 年番
    📁 冬季
    📁 春季
  📁 老番補完計畫
📁 教學影片
  📁 程式設計
  📁 料理
📁 稍後觀看

管理資料夾

在任意資料夾上 按右鍵，可以看到：

✏️ 重新命名：修改資料夾名稱
🗑️ 刪除：刪除資料夾（若資料夾內有書籤，會一起移除）

刪除資料夾前請注意

刪除資料夾會連同其中所有子資料夾與書籤一起刪除，且 目前無法還原。若不確定，建議先把書籤移出再刪資料夾。

搬移書籤

目前書籤庫不支援拖拉移動。每個書籤卡片上方提供三個操作按鈕：

按鈕	功能
🗑️ 刪除(Delete)	刪除這個書籤（無法復原）
📂 移動到(Move to)	選擇目標資料夾，將書籤移過去
✏️ 重新命名(Rename)	修改書籤的顯示標題

7. 排序與搜尋 🔍

排序方式

點擊書籤庫右上角的排序選單，可選擇：

排序方式	說明
最新優先（Newest）	最近收藏的排在最前面（預設）
最舊優先（Oldest）	最早收藏的排在最前面
標題排序（Title A→Z）	依影片標題字母順序排列

即時搜尋

書籤庫頂部有一個搜尋框，輸入關鍵字後：

系統即時篩選符合標題的書籤
搜尋範圍：目前所在的資料夾（包含子資料夾）
清除搜尋框回到全部顯示

搜尋技巧

搜尋是不區分大小寫的，而且支援部分比對。例如搜尋「教學」會找到所有標題含有「教學」的書籤。

8. 動態防盜鏈機制 🔒

這是書籤庫一個比較技術性但非常重要的功能。

什麼是防盜鏈？

許多影片平台的縮圖圖片伺服器會檢查 HTTP 請求的 Referer 標頭。如果 Referer 不是該平台自己的域名，就會拒絕提供圖片——這會導致你的書籤庫裡很多縮圖顯示為破圖。

V-Train 的解決方案

書籤庫有一套 動態 CDN 學習機制：

書籤庫開啟時，自動掃描所有書籤的縮圖 URL
擷取縮圖 URL 的 主機名稱（hostname），識別這些是哪些 CDN / 圖片伺服器
將這些 CDN 主機名稱傳送給 background.js
Background Script 使用 Chrome 的 declarativeNetRequest API 動態建立規則
規則的效果：當瀏覽器對這些 CDN 請求縮圖時，自動將 Referer 標頭改為正確的來源域名

🛡️ 這是安全的嗎？

完全安全。這個機制只修改對特定圖片 CDN 的 Referer 標頭，不影響任何其他網路請求，也不會竊取或傳送你的瀏覽資料。這是許多瀏覽器擴充功能用來解決防盜鏈問題的標準作法。

實際效果： 來自 B 站、Nicovideo、各種自架影片平台的縮圖，在書籤庫中都能正常顯示，不再一片破圖。

9. 多分頁即時同步 🔄

如果你同時開了很多分頁（這很正常！），書籤庫的資料會透過 BroadcastChannel 技術在所有分頁之間即時同步。

技術細節

V-Train 使用一個名為 vt_sync_channel 的 BroadcastChannel：

在分頁 A 收藏了一個書籤 → 分頁 B 的書籤庫立即更新
在分頁 A 刪除了一個書籤 → 分頁 B 的書籤庫立即反映
評分更新也會即時同步

為什麼這很重要？

如果沒有即時同步，你可能在分頁 A 收藏了影片，然後切到分頁 B 的書籤庫卻看不到——這會令人困惑。BroadcastChannel 確保所有分頁都顯示最新狀態。

同步的範圍

BroadcastChannel 只在同一個瀏覽器視窗的不同分頁之間同步，不跨裝置。V-Train 採用純本地儲存架構，無雲端同步功能。

10. 免費版保護：書籤永不被 GC 刪除 🛡️

什麼是 GC（Garbage Collection）？

V-Train 的觀看記錄資料庫會隨時間累積大量資料。為了控制儲存空間，系統會定期執行「垃圾回收」（GC），刪除長時間未被訪問的舊資料。

書籤的特殊保護

書籤不會被 GC 刪除

無論你是免費版還是 PRO 版，只要一部影片被加入書籤庫，V-Train 就會對這筆觀看記錄資料標記「受保護」。GC 執行時會自動跳過這些被保護的資料，永遠不會刪除你的書籤影片記錄。

這意味著：

情境	結果
影片有書籤	✅ 永遠保留，GC 不刪除
影片無書籤，觀看記錄較新	✅ 保留（尚未到 GC 門檻）
影片無書籤，觀看記錄很舊	❌ 可能被 GC 清除

免費版用戶也能享有這個保護

書籤的 GC 保護不是 PRO 專屬。即使是免費版，你收藏的書籤也會受到保護。這是 V-Train 確保「你明確想保留的東西，絕對不會消失」的設計原則。

小結：書籤庫工作流程建議 🗂️

以下是一個高效使用書籤庫的建議工作流程：

瀏覽中，用面板快速評分：看到有趣的影片，👍 一下留個印象，不需要打開書籤庫
想儲存的，用 ❤️ 分類收藏：選好資料夾，讓日後更容易找到
怕縮圖消失，用 📸 截圖：特別是珍貴的直播截圖或短期內容
定期整理資料夾：用拖拉功能重新整理，保持書籤庫整潔
搜尋比滑動更快：忘記放在哪個資料夾時，直接用搜尋功能

書籤庫是你的個人影片圖書館，愈用愈順手。如有功能建議，歡迎到社群規則庫提出 Issue！

❤️ 書籤庫與浮動互動面板（Bookmark Vault & Hover Panel） ​

1. 浮動互動面板（Hover Panel）詳解 🎯 ​

2. 評分功能（👍 喜歡 / 👎 不喜歡）⭐ ​

什麼是評分？ ​

如何評分？ ​

評分的視覺顯示 ​

3. 收藏到書籤庫（❤️ + 資料夾選擇）📁 ​

收藏流程 ​

書籤的完整資料結構 ​

4. 截圖封面功能（📸）🖼️ ​

什麼是截圖封面？ ​

截圖的技術流程 ​

5. 書籤庫管理介面 📚 ​

如何開啟書籤庫？ ​

介面功能一覽 ​

6. 資料夾系統 📂 ​

建立資料夾 ​

管理資料夾 ​

搬移書籤 ​

7. 排序與搜尋 🔍 ​

排序方式 ​

即時搜尋 ​

8. 動態防盜鏈機制 🔒 ​

什麼是防盜鏈？ ​

V-Train 的解決方案 ​

9. 多分頁即時同步 🔄 ​

技術細節 ​

同步的範圍 ​

10. 免費版保護：書籤永不被 GC 刪除 🛡️ ​

什麼是 GC（Garbage Collection）？ ​

書籤的特殊保護 ​

小結：書籤庫工作流程建議 🗂️ ​