# Wechat Article Extractor

> 微信公众号文章内容提取工具。使用 agent-browser 从微信公众号文章页面（mp.weixin.qq.com）提取标题、正文、截图等完整内容，支持导出为 Markdown 文档并下载图片到本地。当用户需要访问微信公众号链接、提取微信文章内容、获取微信文章全文、导出微信文章为 Markdown、保存微信文章图片时使用此 skill。

- Skill: `gray0128/wechat-article-extractor` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add gray0128/wechat-article-extractor`
- Raw SKILL.md: https://api.skillmd.com/api/skills/gray0128/wechat-article-extractor/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: AI & ML
- Author: gray0128 (https://skillmd.com/u/gray0128)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/gray0128/wechat-article-extractor

---


# 微信公众号文章提取器

## 概述

使用 agent-browser 浏览器自动化工具从微信公众号文章页面提取完整内容，包括标题、正文文本和页面截图。支持导出为 Markdown 文档并下载图片到本地目录。

## 快速开始

### 方式一：导出为 Markdown（推荐，保存图片）

```bash
# 使用 Python 脚本导出文章为 Markdown，图片会自动下载到本地
python3 /Users/libo/.claude/skills/wechat-article-extractor/scripts/extract-wechat-markdown.py "https://mp.weixin.qq.com/s/..."

# 或指定输出目录
python3 /Users/libo/.claude/skills/wechat-article-extractor/scripts/extract-wechat-markdown.py "https://mp.weixin.qq.com/s/..." ./my-article
```

输出目录结构：
```
wechat_article_20240101_120000/
├── 文章标题.md          # Markdown 文档
└── images/              # 图片目录
    ├── image_001.jpg
    ├── image_002.png
    └── ...
```

### 方式二：完整提取流程（确保图片加载）

```bash
# 1. 打开微信文章链接
agent-browser open "https://mp.weixin.qq.com/s/..."

# 2. 等待页面初始加载
agent-browser wait --load networkidle

# 3. 使用 JavaScript 强制加载所有图片（推荐，自动处理所有懒加载图片）
agent-browser eval "
  const images = document.querySelectorAll('img');
  let count = 0;
  images.forEach(img => {
    // 处理常见的懒加载属性
    const src = img.dataset.src || img.dataset.lazy || img.getAttribute('data-src');
    if (src && !img.src.includes(src)) {
      img.src = src;
      count++;
    }
  });
  'Triggered loading for ' + count + ' images';
"

# 4. 等待图片加载完成（根据文章长度调整，通常 3-5 秒）
agent-browser wait 4000

# 5. 获取文章标题
agent-browser get title

# 6. 截取页面截图
agent-browser screenshot

# 7. 使用 JavaScript 提取文章正文
agent-browser eval "const content = document.getElementById('js_content'); content ? content.innerText : document.body.innerText"
```

## 详细工作流程

### 步骤 1: 打开页面并验证

```bash
# 打开链接
agent-browser open "https://mp.weixin.qq.com/s/0HjProzuQuOc3SCY6DIZBw"

# 等待网络空闲（确保页面完全加载）
agent-browser wait --load networkidle

# 验证标题
agent-browser get title
```

### 步骤 2: 确保图片加载（关键优化）

微信公众号文章使用图片懒加载，以下是几种加载图片的方法：

#### 方法 A: JavaScript 强制加载（推荐，最智能）

直接通过 JavaScript 将所有懒加载图片的真实地址赋值给 src 属性，无需滚动：

```bash
agent-browser eval "
  const images = document.querySelectorAll('img');
  let count = 0;
  images.forEach(img => {
    // 尝试多种常见的懒加载属性
    let src = img.dataset.src;
    if (!src) src = img.dataset.lazy;
    if (!src) src = img.getAttribute('data-src');
    if (!src) src = img.getAttribute('data-lazy');

    if (src && src !== img.src) {
      img.src = src;
      count++;
    }
  });
  'Loaded ' + count + ' images, total ' + images.length + ' images found';
"
agent-browser wait 4000
```

#### 方法 B: 动态滚动（根据页面高度）

先获取页面高度，然后根据高度计算滚动次数：

```bash
# 1. 获取页面高度
agent-browser eval "Math.max(document.body.scrollHeight, document.documentElement.scrollHeight)"

# 2. 根据返回的高度计算滚动次数
# 假设每次滚动 800px，滚动次数 = ceil(总高度 / 800)
# 例如高度为 5000px，则需要滚动 7 次

# 3. 执行滚动（示例：滚动 5 次）
agent-browser scroll down 800
agent-browser wait 800
agent-browser scroll down 800
agent-browser wait 800
agent-browser scroll down 800
agent-browser wait 800
agent-browser scroll down 800
agent-browser wait 800
agent-browser scroll down 800
agent-browser wait 800

# 4. 滚动回顶部
agent-browser scroll up 99999
agent-browser wait 2000
```

#### 方法 C: 简单分段滚动（适用于大多数文章）

```bash
agent-browser scroll down 1000
agent-browser wait 1000
agent-browser scroll down 1000
agent-browser wait 1000
agent-browser scroll down 1000
agent-browser wait 1000
agent-browser scroll down 1000
agent-browser wait 1000
agent-browser scroll up 99999
agent-browser wait 3000
```

### 步骤 3: 截取页面截图

```bash
# 截取可视区域
agent-browser screenshot

# 或者截取完整页面
agent-browser screenshot --full
```

### 步骤 4: 提取文章正文

微信公众号文章的正文内容通常存储在 `id="js_content"` 的 div 元素中。使用 `eval` 命令执行 JavaScript 来提取：

```bash
# 提取正文内容（推荐方法）
agent-browser eval "const content = document.getElementById('js_content'); content ? content.innerText : document.body.innerText"
```

如果 `js_content` 不存在，会回退到获取整个 body 的文本。

### 步骤 5: 导出为 Markdown（可选）

使用 Python 脚本将文章导出为 Markdown 并下载图片：

```bash
python3 /Users/libo/.claude/skills/wechat-article-extractor/scripts/extract-wechat-markdown.py "https://mp.weixin.qq.com/s/..."
```

脚本会自动：
1. 使用 agent-browser 打开文章页面
2. 强制加载所有懒加载图片
3. 提取文章标题和 HTML 内容
4. 解析 HTML，提取所有图片 URL
5. 使用 curl 下载所有图片到 `images/` 目录
6. 将 HTML 转换为 Markdown 格式
7. 保存 Markdown 文件，图片链接替换为本地路径

### 步骤 6: 获取页面快照（可选）

```bash
# 获取交互元素引用
agent-browser snapshot -i
```

## 使用示例

### 示例 1: 导出为 Markdown（推荐）

用户请求："把这篇微信文章保存下来，包括图片"

执行流程：
```bash
python3 /Users/libo/.claude/skills/wechat-article-extractor/scripts/extract-wechat-markdown.py "https://mp.weixin.qq.com/s/..."
```

输出示例：
```
输出目录: /path/to/wechat_article_20240101_120000
正在打开文章页面...
等待页面加载...
强制加载图片...
获取文章标题...
获取文章内容...
解析内容并下载图片...
找到 15 张图片
  下载图片 1/15...
  下载图片 2/15...
  ...

完成！
  Markdown: /path/to/wechat_article_20240101_120000/文章标题.md
  图片目录: /path/to/wechat_article_20240101_120000/images
  下载了 15 张图片
```

### 示例 2: 完整提取文章（推荐方法）

用户请求："访问这个微信链接并提取内容"

执行流程：
```bash
agent-browser open "https://mp.weixin.qq.com/s/..."
agent-browser wait --load networkidle

# 使用 JavaScript 强制加载所有图片
agent-browser eval "
  const images = document.querySelectorAll('img');
  let count = 0;
  images.forEach(img => {
    const src = img.dataset.src || img.dataset.lazy || img.getAttribute('data-src');
    if (src && !img.src.includes(src)) {
      img.src = src;
      count++;
    }
  });
  'Triggered loading for ' + count + ' images';
"
agent-browser wait 4000

agent-browser get title
agent-browser screenshot
agent-browser eval "const content = document.getElementById('js_content'); content ? content.innerText : document.body.innerText"
```

### 示例 3: 仅获取正文

用户请求："提取这篇微信文章的文字内容"

执行流程：
```bash
agent-browser open "https://mp.weixin.qq.com/s/..."
agent-browser wait --load networkidle
agent-browser eval "const content = document.getElementById('js_content'); content ? content.innerText : document.body.innerText"
```

### 示例 4: 快速提取（不关心图片）

用户请求："快速看看这篇文章的标题和内容"

执行流程：
```bash
agent-browser open "https://mp.weixin.qq.com/s/..."
agent-browser wait --load networkidle
agent-browser get title
agent-browser eval "const content = document.getElementById('js_content'); content ? content.innerText : document.body.innerText"
```

### 示例 5: 超长文章提取（动态滚动）

用户请求："这篇文章很长，确保所有图片都加载"

执行流程：
```bash
agent-browser open "https://mp.weixin.qq.com/s/..."
agent-browser wait --load networkidle

# 先获取页面高度
agent-browser eval "Math.max(document.body.scrollHeight, document.documentElement.scrollHeight)"

# 假设返回高度为 8000，则滚动 10 次
agent-browser scroll down 800
agent-browser wait 800
agent-browser scroll down 800
agent-browser wait 800
agent-browser scroll down 800
agent-browser wait 800
agent-browser scroll down 800
agent-browser wait 800
agent-browser scroll down 800
agent-browser wait 800
agent-browser scroll down 800
agent-browser wait 800
agent-browser scroll down 800
agent-browser wait 800
agent-browser scroll down 800
agent-browser wait 800
agent-browser scroll down 800
agent-browser wait 800
agent-browser scroll down 800
agent-browser wait 800

agent-browser scroll up 99999
agent-browser wait 3000

agent-browser get title
agent-browser screenshot --full
agent-browser eval "const content = document.getElementById('js_content'); content ? content.innerText : document.body.innerText"
```

## 参考脚本

此 skill 包含三个便捷脚本：

### 1. Markdown 导出脚本（最新推荐）

`scripts/extract-wechat-markdown.py` - 导出文章为 Markdown 并下载图片：

```bash
# 使用方式
python3 /Users/libo/.claude/skills/wechat-article-extractor/scripts/extract-wechat-markdown.py "https://mp.weixin.qq.com/s/..."

# 或指定输出目录
python3 /Users/libo/.claude/skills/wechat-article-extractor/scripts/extract-wechat-markdown.py "https://mp.weixin.qq.com/s/..." ./my-article
```

脚本会自动：
1. 打开链接
2. 等待初始加载
3. 使用 JavaScript 强制加载所有懒加载图片
4. 等待图片加载完成
5. 获取标题和 HTML 内容
6. 下载所有图片到 `images/` 目录
7. 转换 HTML 为 Markdown
8. 保存 Markdown 文件

### 2. 完整提取脚本

`scripts/extract-wechat-article.sh` - 确保图片加载的完整提取流程：

```bash
# 使用方式
/Users/libo/.claude/skills/wechat-article-extractor/scripts/extract-wechat-article.sh "https://mp.weixin.qq.com/s/..."
```

脚本会自动：
1. 打开链接
2. 等待初始加载
3. 使用 JavaScript 强制加载所有懒加载图片
4. 等待图片加载完成
5. 获取标题
6. 截取截图
7. 提取正文
8. 输出所有结果

### 3. 快速提取脚本

`scripts/extract-wechat-article-quick.sh` - 不等待图片的快速提取：

```bash
# 使用方式
/Users/libo/.claude/skills/wechat-article-extractor/scripts/extract-wechat-article-quick.sh "https://mp.weixin.qq.com/s/..."
```

## 图片加载优化说明

### 为什么图片没有加载？

微信公众号文章使用**懒加载（Lazy Loading）**技术：
- 图片初始时不加载，只有滚动到视口附近才会加载
- 使用 `data-src`、`data-lazy` 等属性存储真实图片地址
- 需要滚动或 JavaScript 触发才能加载

### 解决方案对比

| 方法 | 优点 | 缺点 | 推荐场景 |
|------|------|------|----------|
| **JavaScript 强制加载** | 无需滚动，一次性处理所有图片，最智能 | 某些特殊懒加载方式可能不支持 | **大多数情况推荐** |
| 动态滚动 | 模拟真实用户行为，兼容性最好 | 需要先获取页面高度，手动计算滚动次数 | 超长文章，JavaScript 方法失效时 |
| 简单分段滚动 | 简单易记 | 可能滚动不足或过多 | 普通长度文章 |

### JavaScript 强制加载的原理

```javascript
const images = document.querySelectorAll('img');
images.forEach(img => {
  // 尝试多种懒加载属性
  const src = img.dataset.src || img.dataset.lazy || img.getAttribute('data-src');
  if (src) {
    img.src = src;  // 直接赋值触发加载
  }
});
```

这种方法直接操作 DOM，无需实际滚动页面，效率最高。

### Markdown 导出说明

`extract-wechat-markdown.py` 脚本的工作原理：

1. **提取 HTML**：通过 agent-browser 获取 `#js_content` 的完整 HTML
2. **解析图片**：使用正则表达式提取所有 `data-src` 和 `src` 属性
3. **下载图片**：使用 curl 下载图片到 `images/` 目录，文件命名为 `image_001.jpg`、`image_002.png` 等
4. **HTML 转 Markdown**：
   - 移除 HTML 标签
   - 保留段落结构
   - 将图片标签替换为 Markdown 图片语法 `![图片](images/image_001.jpg)`
5. **保存文件**：输出目录包含 Markdown 文件和 images 子目录