Smart Media Sniffer · Preview & Download — Automatically capture video streams, audio, and images from web pages with built-in playback and instant download.

🇨🇳 中文文档 | 🇬🇧 English

Four-layer detection mechanism for precise media capture:

• Network Request Interception — Real-time monitoring via webRequest API
• Content-Type Priority — Analyzes response headers first for accurate format detection
• URL Pattern Matching — Smart recognition of media signatures in URL paths and parameters
• Fetch/XHR Injection — Injected scripts capture dynamically loaded media requests

Preview media without leaving the extension panel:

• Stream Playback — Built-in HLS.js / DASH.js players with automatic error recovery
• Audio Spectrum — Real-time frequency visualization powered by Web Audio API
• Image Preview — Full-screen lightbox with automatic dimension detection

Quickly locate target resources:

• Category Tabs — One-click switch between All / Stream / Video / Audio / Image
• Format Filter — Filter by specific media format
• Size Filter — Set min/max file size range
• Resolution Filter — Filter by video resolution (8K/4K/1080P/720P, etc.)
• Dimension Filter — Filter by image width and height

Fine-grained control over sniffing behavior:

• Per-type Toggle — Independently enable/disable sniffing for streaming/video/audio/image
• Minimum Capture Size — Set file size thresholds per type to filter out fragments
• Domain Exclusion — Exclude specific domains to avoid unwanted captures

• Select All — Quickly select all media items
• Batch Download — Download multiple selected files at once
• Copy URL — One-click copy media links to clipboard

Automatically fetched and displayed:

• File Size — Real-time file size display
• Video Resolution — MediaInfo-powered width/height parsing with resolution labels
• Audio Duration — Automatic duration detection
• Image Dimensions — Automatic width/height recognition

• Tab Isolation — Independent media list per browser tab
• Badge Counter — Real-time capture count on the extension icon
• Dark Mode — Automatic system theme adaptation
• i18n — English, Simplified Chinese, Traditional Chinese, Japanese
• Keyboard Shortcuts — Configurable shortcut to open the panel

🌐 Website: flowpick.net

1. Clone the repository:

git clone https://github.com/ezwebtools/flowpick.git
cd flowpick

2. Install dependencies:

npm install

3. Build for production:

# Chrome
npm run build

# Firefox
npm run build:firefox

4. Load the extension:
   • Chrome/Edge: Go to chrome://extensions/, enable "Developer mode", click "Load unpacked", and select the .output/chrome-mv3 directory
   • Firefox: Go to about:debugging#/runtime/this-firefox, click "Load Temporary Add-on", and select .output/firefox-mv2/manifest.json

# Chrome (hot reload)
npm run dev

# Firefox (hot reload)
npm run dev:firefox

1. Auto Sniffing — FlowPick automatically captures media requests as you browse
2. View List — Click the extension icon to see all detected media for the current tab
3. Filter & Sort — Use tabs and filters to quickly locate target resources
4. Preview & Play — Click play to stream video/audio in-panel, or preview images full-screen
5. Copy URL — One-click copy media URL to clipboard
6. Download — Click download to save media files directly

💡 Tip: Some videos must start playing on the page before they can be detected.

flowpick/
├── entrypoints/
│   ├── background.ts      # Background: network monitoring, media detection, download management
│   ├── content.ts         # Content script: page injection, message relay
│   ├── injected.ts        # Injected script: Fetch/XHR interception
│   ├── popup/             # Popup panel UI
│   │   ├── App.vue        # Main component: list, playback, settings
│   │   ├── main.ts        # Entry point
│   │   └── style.css      # Styles
│   ├── download/          # Download page
│   │   ├── App.vue        # Download progress component
│   │   └── index.html     # Download page entry
│   └── options/           # Options page
│       └── App.vue        # Settings component
├── utils/
│   ├── detect.ts          # Media format detection (Content-Type + URL pattern)
│   ├── settings.ts        # Settings management (sniffing rules, domain exclusion)
│   └── storage.ts         # Storage management (per-tab data persistence)
├── public/
│   ├── _locales/          # Internationalization (en / zh_CN / zh_TW / ja)
│   ├── icon/              # Extension icons
│   └── MediaInfoModule.wasm  # MediaInfo WASM module
├── wxt.config.ts          # WXT configuration
└── package.json           # Project dependencies

• Chrome / Edge / Chromium (Manifest V3)
• Firefox (Manifest V2)

Contributions are welcome! Feel free to submit a Pull Request.

MIT License — see LICENSE for details.

• WXT — Excellent web extension framework
• hls.js — HLS streaming playback support
• dash.js — DASH streaming playback support
• mediainfo.js — Media metadata parsing
• Tailwind CSS — Utility-first CSS framework