yaolifeng0629/PickPic

GitHub: yaolifeng0629/PickPic

PickPic 是一款能从任意网页一键下载图片和视频的浏览器扩展，特别增强了微信公众号文章的支持。

Stars: 79 | Forks: 5

PickPic Logo

PickPic

One-click downloader for images and videos from any webpage

Enhanced support for WeChat Official Account articles

Chrome Web Store Version License

简体中文 | English

## 功能特性 ### 图片提取 - 自动检测页面中的所有图片 - 支持懒加载图片（`data-src`、`data-original` 等） - 提取 `` 元素内容 - 智能过滤微信文章（排除头像、二维码等） - 双击可在新标签页预览图片 ### 视频检测（三层检测） | 层级 | 方法 | 覆盖范围 | |-------|--------|----------| | **DOM 检测** | `video` 标签、`source` 元素、数据属性、结构化数据（`ld+json`）、meta 标签（`og:video`）、播放器容器（video.js 等） | 静态视频元素 | | **网络拦截** | 挂钩 `fetch()` 和 `XMLHttpRequest`、`PerformanceObserver` 监控、`performance.getEntriesByType('resource')` | 动态加载的视频 | | **Blob URL 识别** | 检测 MSE（媒体源扩展）生成的 `blob:` URL，支持 `MediaRecorder` + `captureStream()` 捕获 | 流媒体 / 加密视频 | ### 视频类型标签 ### 下载支持 | 格式 | 检测 | 下载 | |--------|-----------|----------| | MP4 | 支持 | 直接下载 | | WebM | 支持 | 直接下载 | | MKV / AVI / MOV | 支持 | 直接下载 | | FLV | 支持 | 直接下载 | | HLS (m3u8) | 支持 | 自动解析分片并合并为 MP4 | | DASH (mpd) | 支持 | 需要外部工具 | | Blob URL (MSE) | 支持 | 需要录制 / 捕获 | | TS / M4S 分片 | 支持 | 自动拼接 | | Canvas PNG | 支持 | 直接导出 | ### 灵活的下载选项 - **单个文件**：直接下载 - **多个文件**：自动打包为 ZIP 压缩文件 - **全选**：一键选择所有媒体 - **右键菜单**：快速下载页面上的任意图片 ### 文章详情（微信） - 查看文章元数据：标题、作者、描述、封面图 - 优化文章正文内容提取 - 一键访问文章链接 ## 支持的平台 - [x] 微信公众号文章 - [x] [yaolifeng.com](https://yaolifeng.com) - [x] 掘金 - [x] 知乎 - [x] InfoQ - [x] 简书 - [x] 阿里云 - [x] 腾讯云 - [x] CSDN - [x] 博客园 - [x] 51CTO - [x] 新浪微博 - [x] 豆瓣 - [x] 哔哩哔哩 - [x] 微博 - [x] 思否 - [x] 今日头条 - [x] 任何其他网页（通用检测） ## 技术栈 - **[Plasmo](https://www.plasmo.com/)** — 浏览器扩展框架 - **[React 18](https://react.dev/)** — UI 库 - **[TypeScript](https://www.typescriptlang.org/)** — 类型安全 - **[Tailwind CSS](https://tailwindcss.com/)** — 样式 - **[Zustand](https://zustand-demo.pmnd.rs/)** — 状态管理 - **[i18next](https://www.i18next.com/)** — 国际化 - **[JSZip](https://stuk.github.io/jszip/)** — ZIP 文件创建 - **[FileSaver.js](https://github.com/eligrey/FileSaver.js/)** — 文件下载 - **[Lucide React](https://lucide.dev/)** — 图标 - **[Radix UI](https://www.radix-ui.com/)** — 无障碍 UI 基础组件 - **[mux.js](https://github.com/videojs/mux.js/)** — 视频转码（TS 转 MP4） ## 安装说明 ### 从 Chrome 应用商店安装（推荐） 即将上线。 ### 从源代码安装（开发） **前置条件**：Node.js 18+ 和 pnpm ``` # 克隆仓库 git clone https://github.com/yaolifeng0629/PickPic.git cd PickPic # 安装依赖项 pnpm install # 启动开发服务器 pnpm dev ``` 然后在 Chrome 中加载扩展： 1. 打开 `chrome://extensions/` 2. 启用 **开发者模式**（右上角的开关） 3. 点击 **加载已解压的扩展程序** 4. 选择 `build/chrome-mv3-dev` 目录 ### 生产环境构建 ``` # 构建生产环境版本 pnpm build # 打包为ZIP文件以进行分发 pnpm package ``` 生产包将生成在 `build/chrome-mv3-prod` 目录中。 ## 使用方法 1. **访问任意网页** — PickPic 可在所有网站上使用 2. **打开扩展** — 点击浏览器工具栏中的 PickPic 图标 3. **查看提取的内容** — 所有图片、视频和画布都显示在侧边栏中 4. **对于微信文章** — 点击 **详情** 按钮查看文章元数据 5. **选择项目** — 点击选择（支持多选） 6. **预览图片** — 双击任意图片在新标签页中打开 7. **下载**： - **下载所选**：单个项目直接下载；多个项目打包为 ZIP - **下载全部**：创建包含所有内容的 ZIP 压缩文件 8. **刷新** — 点击刷新按钮重新扫描页面以查找新内容 ### 右键菜单 在任意图片上右键单击，选择 **"下载此图片"** 无需打开侧边栏即可立即下载。 ## 权限说明 | 权限 | 用途 | |------------|---------| | `activeTab` | 访问当前网页以提取媒体 | | `storage` | 保存用户偏好设置（语言、设置） | | `downloads` | 下载图片、视频和 ZIP 文件 | | `sidePanel` | 在浏览器侧边栏中显示扩展界面 | | `contextMenus` | 添加右键菜单选项以快速下载 | | `` | 在任意网站上工作（仅在您点击扩展图标时提取媒体） | ## 隐私政策 PickPic **不会**收集、存储或传输任何个人数据。所有处理都在您的浏览器本地完成。详情请参阅 [PRIVACY.md](./PRIVACY.md)。 ## 已知限制 1. **DASH (mpd)**：浏览器无法直接下载 mpd 格式。请使用 [FFmpeg](https://ffmpeg.org/) 或类似工具： ffmpeg -i "https://example.com/video.mpd" -c copy output.mp4 2. **Blob URL (MSE)**：需要视频正在播放才能录制。输出格式为 WebM。 3. **受 DRM 保护的内容**：受 Widevine、FairPlay 或 PlayReady 保护的视频无法下载。 ## 项目结构 ``` PickPic/ ├── assets/ # Extension icons and images ├── background.ts # Service worker ├── sidepanel.tsx # Side panel entry point ├── contents/ # Content scripts │ ├── extractor.ts # Main extraction orchestrator │ └── extractors/ │ ├── article-extractor.ts # WeChat article metadata │ ├── network-interceptor.ts # Network request interception │ └── video-extractor.ts # Video detection logic ├── components/ │ ├── sidepanel/ # Side panel UI components │ ├── settings/ # Settings page tabs │ └── ui/ # Reusable UI primitives ├── hooks/ # Custom React hooks ├── lib/ # Utility functions │ ├── canvas-extractor.ts # Canvas element extraction │ ├── image-extractor.ts # Image detection │ ├── image-downloader.ts # Download queue and logic │ ├── hls-utils.ts # HLS playlist utilities │ ├── zip-utils.ts # ZIP packaging │ └── video/ # Video download modules │ ├── hls-downloader.ts # HLS to MP4 downloader │ ├── blob-downloader.ts # Blob URL downloader │ ├── mse-transmuxer.ts # TS to MP4 transmuxer │ └── video-format-utils.ts ├── store/ # Zustand state stores ├── types/ # TypeScript type definitions ├── locales/ # i18n translation files │ ├── en/ # English │ └── zh-CN/ # Simplified Chinese └── config/ └── i18n.ts # i18n configuration ``` ## 开发命令 | 命令 | 描述 | |---------|-------------| | `pnpm dev` | 启动开发服务器（支持热重载） | | `pnpm build` | 创建生产环境构建 | | `pnpm package` | 将扩展打包为 ZIP 文件以便分发 | | `pnpm lint` | 运行 ESLint | | `pnpm lint:fix` | 运行 ESLint 并自动修复 | ## 参与贡献 欢迎贡献！请随时提交 Pull Request。 1. Fork 本仓库 2. 创建您的特性分支：`git checkout -b feature/AmazingFeature` 3. 提交您的更改：`git commit -m '添加一些很酷的特性'` 4. 推送到分支：`git push origin feature/AmazingFeature` 5. 提交 Pull Request ## 作者 **Immerse** - 网站：[yaolifeng.com](https://yaolifeng.com) - GitHub：[@yaolifeng0629](https://github.com/yaolifeng0629) - 邮箱：dev@yaolifeng.com ## 许可证 [MIT License](./LICENSE)

由 Immerse 精心打造

标签：Chrome插件, CMS安全, DOM解析, JavaScript, 一键下载, 下载工具, 反调试, 图片下载, 图片提取, 多媒体下载, 媒体提取, 微信公众号支持, 懒加载检测, 效率工具, 浏览器扩展, 用户体验, 网络拦截, 自动化攻击, 视频下载, 视频检测