專案資訊

專案名稱： FlowPick-網頁媒體下載器與媒體嗅探器瀏覽器擴充功能

專案簡介： FlowPick 是一款免費、注重隱私的瀏覽器擴充功能，專為「網頁媒體下載」與「媒體來源偵測」所設計。它能自動偵測網頁中的 M3U8/HLS 串流、MPD/DASH 影片、音訊以及圖片，並提供一鍵下載的功能，幫助使用者輕鬆保存喜愛的線上多媒體內容。

開發狀態： 已上線，持續更新中

必要連結

• 官方網站： https://flowpick.net
• GitHub 儲存庫： FlowPick-Github

技術實作內容

開發動機：
我自己在網路上看到喜歡的影片或音樂時，常常遇到「無法下載」或「下載步驟繁瑣」的困擾。尤其是面對現今主流的 M3U8 或 MPD 這種串流格式，傳統的網頁下載工具幾乎束手無策。為了解決這個痛點，並希望提供一個安全、無需上傳檔案（保護隱私）的解決方案，我著手開發了 FlowPick 這個瀏覽器擴充功能。

技術架構：
FlowPick 是基於瀏覽器擴充功能架構所開發的專案。其核心技術與架構如下：

• 前端與擴充功能介面：使用原生 JavaScript 搭配瀏覽器擴充功能 API (Extension APIs) 開發，確保在 Chrome 等 Chromium 核心瀏覽器上能輕量且高效運作。
• 核心邏輯：透過瀏覽器的 webRequest 與 declarativeNetRequest API，攔截並分析網頁背景的網路請求，從中過濾出串流媒體清單檔（如 .m3u8, .mpd）或媒體片段。
• 無後端伺服器：考量到隱私與速度，所有偵測與下載邏輯皆在使用者本地瀏覽器端執行，不經手任何外部伺服器，確保檔案與瀏覽紀錄不會外流。

核心邏輯與技術挑戰：
本專案最大的技術挑戰在於**「如何準確且有效率地從大量且混亂的網路請求中，解析出真正的媒體串流來源」**。許多網站的串流請求會帶有複雜的動態參數、Token 或進行混淆，這使得單純的 URL 比對無法有效運作。此外，M3U8 或 MPD 清單檔內部可能還有多層級的巢狀結構（例如，主清單指向不同畫質的子清單），需要遞迴解析才能取得最終的媒體片段網址。

解決方案：
針對上述挑戰，我採取了以下技術手段：

1. 智能請求過濾器：我實作了一套基於「檔案副檔名」與「Content-Type 回應標頭」的雙重判斷邏輯，能精準鎖定 .m3u8、.mpd、.ts、.m4s 等關鍵媒體格式請求，大幅降低雜訊。
2. 動態清單解析引擎：設計了遞迴解析器，會自動下載並解析 M3U8/MPD 清單檔的內部內容，不僅能找出最終的影片片段網址，還能在解析過程中重組因加密或分片而零散的檔案，最終拼接成一個完整的影片檔提供下載。
3. 使用者操作優化：為了解決部分網站串流認證時效短暫的問題，我加入了「即時頁面上下文獲取」機制。當使用者點擊下載時，擴充功能會直接從當前頁面環境中獲取必要的 Cookie 或權杖資訊，確保下載請求能通過驗證而成功。

歡迎大家試用並提出寶貴建議。