PickPic

One-click downloader for images and videos from any webpage

Enhanced support for WeChat Official Account articles

简体中文 | English

---

Features

Image Extraction

• Automatically detect all images on the page
• Support lazy-loaded images (data-src, data-original, etc.)
• Extract content from <canvas> elements
• Smart filtering for WeChat articles (excludes avatars, QR codes, etc.)
• Double-click to preview images in a new tab

Video Detection (Three-Layer Detection)

Layer	Method	Coverage
DOM Detection	video tags, source elements, data attributes, structured data (ld+json), meta tags (og:video), player containers (video.js, etc.)	Static video elements
Network Interception	Hook fetch() and XMLHttpRequest, PerformanceObserver monitoring, performance.getEntriesByType('resource')	Dynamically loaded videos
Blob URL Recognition	Detect blob: URLs generated by MSE (Media Source Extensions), support MediaRecorder + captureStream() capture	Streamed / encrypted videos

Video Type Labels

Label	Color	Description
Stream	Orange	HLS/DASH streaming video (m3u8/mpd)
Record	Blue	Blob URL video (MSE)
Network	Green	Video detected via network interception

Download Support

Format	Detection	Download
MP4	Yes	Direct download
WebM	Yes	Direct download
MKV / AVI / MOV	Yes	Direct download
FLV	Yes	Direct download
HLS (m3u8)	Yes	Auto-parse segments and merge to MP4
DASH (mpd)	Yes	External tool required
Blob URL (MSE)	Yes	Recording / capture required
TS / M4S segments	Yes	Auto-concatenate
Canvas PNG	Yes	Direct export

Flexible Download Options

• Single file: Direct download
• Multiple files: Auto-packaged as ZIP archive
• Select All: One-click selection of all media
• Right-click menu: Quick download any image on the page

Article Details (WeChat)

• View article metadata: title, author, description, cover image
• Optimized content extraction from article body
• One-click access to article URL

Supported Platforms

• WeChat Official Account Articles
• yaolifeng.com
• Juejin (掘金)
• Zhihu (知乎)
• InfoQ
• Jianshu (简书)
• Aliyun (阿里云)
• Tencent Cloud (腾讯云)
• CSDN
• Cnblogs (博客园)
• 51CTO
• Sina Weibo (新浪微博)
• Douban (豆瓣)
• Bilibili (哔哩哔哩)
• Weibo (微博)
• SegmentFault (思否)
• Toutiao (今日头条)
• Any other webpage (universal detection)

Tech Stack

• Plasmo — Browser extension framework
• React 18 — UI library
• TypeScript — Type safety
• Tailwind CSS — Styling
• Zustand — State management
• i18next — Internationalization
• JSZip — ZIP archive creation
• FileSaver.js — File downloads
• Lucide React — Icons
• Radix UI — Accessible UI primitives
• mux.js — Video transmuxing (TS to MP4)

Installation

From Chrome Web Store (Recommended)

Coming soon.

From Source (Development)

Prerequisites: Node.js 18+ and pnpm

# Clone the repository
git clone https://github.com/yaolifeng0629/PickPic.git
cd PickPic

# Install dependencies
pnpm install

# Start development server
pnpm dev

Then load the extension in Chrome:

1. Open chrome://extensions/
2. Enable Developer mode (toggle in the top right)
3. Click Load unpacked
4. Select the build/chrome-mv3-dev directory

Production Build

# Build for production
pnpm build

# Package as ZIP for distribution
pnpm package

The production bundle will be created in build/chrome-mv3-prod.

Usage

1. Navigate to any webpage — PickPic works on all websites
2. Open the extension — Click the PickPic icon in your browser toolbar
3. View extracted content — All images, videos, and canvases are displayed in the side panel
4. For WeChat articles — Click the Detail button to view article metadata
5. Select items — Click to select (multi-select supported)
6. Preview images — Double-click any image to open it in a new tab
7. Download:
   • Download Selected: Single item downloads directly; multiple items are packaged as ZIP
   • Download All: Creates a ZIP archive with all content
8. Refresh — Click the refresh button to re-scan the page for new content

Right-Click Menu

Right-click on any image and select "Download this image" for instant download without opening the side panel.

Permissions

Permission	Purpose
activeTab	Access the current webpage to extract media
storage	Save user preferences (language, settings)
downloads	Download images, videos, and ZIP files
sidePanel	Display the extension interface in the browser side panel
contextMenus	Add right-click menu options for quick downloads
<all_urls>	Work on any website (media is only extracted when you click the extension icon)

Privacy

PickPic does not collect, store, or transmit any personal data. All processing happens locally in your browser. See PRIVACY.md for details.

Known Limitations

1. DASH (mpd): Browser cannot directly download mpd format. Use FFmpeg or similar tools:

   ffmpeg -i "https://example.com/video.mpd" -c copy output.mp4

2. Blob URL (MSE): Requires the video to be playing for recording. Output format is WebM.

3. DRM-protected content: Videos protected by Widevine, FairPlay, or PlayReady cannot be downloaded.

Project Structure

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

Development Commands

Command	Description
pnpm dev	Start development server with hot reload
pnpm build	Create production build
pnpm package	Package extension as ZIP for distribution
pnpm lint	Run ESLint
pnpm lint:fix	Run ESLint with auto-fix

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch: git checkout -b feature/AmazingFeature
3. Commit your changes: git commit -m 'Add some AmazingFeature'
4. Push to the branch: git push origin feature/AmazingFeature
5. Open a Pull Request

Author

Immerse

• Website: yaolifeng.com
• GitHub: @yaolifeng0629
• Email: dev@yaolifeng.com

License

MIT License

---

Made with care by Immerse