# Microi吾码视频下载器
**Repository Path**: microi-net/microi.spider
## Basic Information
- **Project Name**: Microi吾码视频下载器
- **Description**: 🎬由开源低代码平台 Microi吾码 出品的通用网页资源嗅探下载工具 —— 自动识别网页中的视频、图片、音频、文档，一键批量下载到本地。开源免费，无广告，支持 Chrome / Edge / 360 / Brave / Opera 等所有 Chromium 内核浏览器。
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 2
- **Forks**: 0
- **Created**: 2026-04-18
- **Last Updated**: 2026-04-29
## Categories & Tags
**Categories**: Uncategorized
**Tags**: 视频下载, 资源嗅探, m3u8
## README
# Microi吾码视频下载器
> 🎬由开源低代码平台 [Microi吾码](https://microi.net) 出品的**通用网页资源嗅探下载工具** —— 自动识别网页中的视频、图片、音频、文档，一键批量下载到本地。开源免费，无广告。
[](https://developer.chrome.com/docs/extensions/mv3/intro/)
[](https://www.electronjs.org/)
[](./LICENSE)
| 平台 | 状态 |
|------|------|
| **Chrome / Edge / 360 / Brave / Opera** 等 Chromium 浏览器扩展 | ✅ 已完成 |
| **Windows 桌面应用**（Electron） | ✅ 已完成 |
| **macOS 桌面应用**（Electron） | ✅ 已完成（需 macOS 环境构建） |
| **Android APK**（Capacitor / WebView） | 🚧 规划中 |
---
## 📸 预览截图
---
## ✨ 功能特性
| 模块 | 说明 |
|------|------|
| 🎬 **视频** | 嗅探 MP4 / FLV / MKV / WebM 视频直链；**m3u8 (HLS) 分片自动合并下载**；自动标注音视频分离流（DASH） |
| 🖼️ **图片** | DOM + 网络双通道扫描；自动过滤装饰图标和小 GIF；支持 base64 内嵌图片；KB 大小筛选；列表/网格视图；全选批量下载；点击放大预览 |
| 🎵 **音频** | 自动识别 MP3 / M4A / FLAC / OGG / WAV / OPUS |
| 📄 **文档** | 提取页面正文、标题、作者、发布时间，导出 TXT / Markdown；识别 PDF / Office / 压缩包直链 |
| 🔗 **手动输入** | 支持手动输入 URL 打开并自动嗅探 |
| 📌 **侧边栏** | 钉到浏览器侧边栏，边浏览边嗅探（Chrome 116+） |
**快捷键**：`Alt+Shift+M` 打开面板 · `Alt+Shift+D` 嗅探当前页
---
## 🏗️ 多平台架构
```
┌──────────────────────────────────────────────────────────┐
│ Microi吾码视频下载器 │
├─────────────────────┬────────────────────────────────────┤
│ 浏览器扩展 (src/) │ 桌面应用 (electron/) │
│ MV3 + React 18 │ Electron + BrowserView │
│ Service Worker 嗅探 │ webRequest 拦截 + DOM 注入扫描 │
│ │ 页面渲染后自动扫描（支持 SPA） │
├─────────────────────┼────────────────────────────────────┤
│ 适用场景： │ 适用场景： │
│ 日常浏览器中使用 │ 独立运行，手动输入 URL 嗅探 │
│ 侧边栏/弹出面板 │ Windows / macOS / Linux │
└─────────────────────┴────────────────────────────────────┘
```
---
## 🚀 快速开始
### 浏览器扩展
```bash
cd Microi.Spider
npm install
npm run dev # 开发模式（HMR，输出到 dist/）
npm run build # 生产构建
npm run pack # 打包 ZIP + 自动升级版本号
```
安装到浏览器：
1. 打开扩展页面（Chrome: `chrome://extensions`，Edge: `edge://extensions`，360: `se://extensions`）
2. 开启右上角 **开发者模式**
3. 点击 **加载已解压的扩展程序**，选择 `dist/` 目录
> 同一个包兼容所有 Chromium 内核浏览器，无需分别打包。
### 桌面应用（Electron）
```bash
# 终端 1：启动 renderer 开发服务器
npm run electron:dev:renderer
# 终端 2：启动 Electron 主进程
npm run electron:dev
```
构建安装包：
```bash
npm run electron:build:win # Windows（NSIS 安装包）
npm run electron:build:mac # macOS（DMG）
npm run electron:build:linux # Linux（AppImage）
```
构建产物在 `release/` 目录。
### Android APK（规划中）
计划基于 Capacitor 或 Android WebView 实现：
- WebView 加载目标网页 + 注入 DOM 扫描脚本
- 使用 OkHttp 拦截网络请求识别媒体资源
- 复用现有 React UI 组件
---
## 🛠 技术栈
| 层 | 技术 |
|----|------|
| 扩展标准 | **Manifest V3** + Service Worker |
| 桌面应用 | **Electron 33** + BrowserView + webRequest |
| 构建 | **Vite 5** + **@crxjs/vite-plugin** + **electron-builder** |
| UI | **React 18**，纯 CSS 暗色主题，无第三方 UI 库 |
| m3u8 合并 | **Offscreen Document**（绕过 Service Worker 无 DOM/Blob 的限制） |
---
## 📁 项目结构
```
Microi.Spider/
├─ src/ # 浏览器扩展源码
│ ├─ manifest.config.js # Manifest V3 配置
│ ├─ background/
│ │ ├─ index.js # Service Worker：webRequest + 消息路由
│ │ ├─ store.js # Tab 资源池（2h 自动过期清理）
│ │ ├─ classify.js # URL / Content-Type 分类
│ │ ├─ downloader.js # 下载调度（CDN 防盗链 + data URI）
│ │ ├─ filename.js # 文件名清理
│ │ └─ offscreen-bridge.js # Offscreen Document 生命周期管理
│ ├─ content/index.js # Content Script：DOM 扫描 + 正文抽取
│ ├─ injected/media-hook.js # MAIN world 注入：XHR/fetch 拦截
│ ├─ offscreen/ # m3u8 分片下载与合并
│ ├─ popup/ # 暗色酷炫 UI
│ └─ sidepanel/ # 侧边栏面板
├─ electron/ # Electron 桌面应用
│ ├─ main.cjs # 主进程：窗口 + BrowserView + webRequest
│ ├─ preload.cjs # 安全 IPC 桥接
│ ├─ scanner.cjs # DOM 扫描器（注入到目标页面）
│ └─ renderer/ # 桌面版 UI（React）
├─ scripts/
│ ├─ gen-icons.js # SVG → PNG 多尺寸
│ └─ pack.js # 扩展打包脚本
├─ vite.config.js # 扩展构建
├─ vite.electron.config.js # Electron renderer 构建
├─ electron-builder.yml # 桌面安装包配置
└─ package.json
```
---
## 🌐 浏览器扩展发布
同一个包兼容所有 Chromium 内核浏览器：
| 浏览器 | 发布入口 | 备注 |
|--------|----------|------|
| Chrome | [Chrome Web Store](https://chrome.google.com/webstore/devconsole) | 注册费 5 USD |
| Edge | [Microsoft Partner Center](https://partner.microsoft.com/dashboard/microsoftedge) | 免费 |
| 360 极速 / 安全 | [360 扩展中心](http://ext.chrome.360.cn/) | 需申请 |
| Brave / Opera / Vivaldi | 同 Chrome Web Store | 兼容 Chrome 包 |
---
## 🔧 嗅探技术原理
所有嗅探均基于浏览器标准扩展 API，不逆向任何网站的私有协议：
1. **webRequest 监听** — Service Worker 通过 `chrome.webRequest.onResponseStarted` 拦截浏览器已发起的网络请求，按 Content-Type 和文件扩展名分类媒体资源
2. **MAIN world 注入** — 通过 `chrome.scripting.executeScript({ world: 'MAIN' })` 向页面注入 XHR/fetch 钩子，捕获 SPA 异步加载的媒体 URL（不受页面 CSP 限制）
3. **DOM 扫描** — Content Script 扫描 `![]()
` / `