How do I install the Wechat Article Extractor skill?

Run npx skillmds@latest add gray0128/wechat-article-extractor in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

What does the Wechat Article Extractor skill do?

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

Is Wechat Article Extractor safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Wechat Article Extractor?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Wechat Article Extractor free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Wechat Article Extractor?

gray0128 (@gray0128) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Wechat Article Extractor by gray0128

Name: Wechat Article Extractor
Author: gray0128

微信公众号文章提取器

概述

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

快速开始

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

# 使用 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
    └── ...

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

# 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: 打开页面并验证

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

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

# 验证标题
agent-browser get title

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

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

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

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

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: 动态滚动（根据页面高度）

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

# 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: 简单分段滚动（适用于大多数文章）

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: 截取页面截图

# 截取可视区域
agent-browser screenshot

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

步骤 4: 提取文章正文

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

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

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

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

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

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

脚本会自动：

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

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

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

使用示例

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

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

执行流程：

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: 完整提取文章（推荐方法）

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

执行流程：

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: 仅获取正文

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

执行流程：

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: 快速提取（不关心图片）

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

执行流程：

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: 超长文章提取（动态滚动）

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

执行流程：

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 并下载图片：

# 使用方式
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

脚本会自动：

打开链接
等待初始加载
使用 JavaScript 强制加载所有懒加载图片
等待图片加载完成
获取标题和 HTML 内容
下载所有图片到 images/ 目录
转换 HTML 为 Markdown
保存 Markdown 文件

2. 完整提取脚本

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

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

脚本会自动：

打开链接
等待初始加载
使用 JavaScript 强制加载所有懒加载图片
等待图片加载完成
获取标题
截取截图
提取正文
输出所有结果

3. 快速提取脚本

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

# 使用方式
/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 强制加载的原理

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 脚本的工作原理：

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

Wechat Article Extractor

File contents

微信公众号文章提取器

概述

快速开始

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

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

详细工作流程

步骤 1: 打开页面并验证

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

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

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

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

步骤 3: 截取页面截图

步骤 4: 提取文章正文

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

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

使用示例

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

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

示例 3: 仅获取正文

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

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

参考脚本

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

2. 完整提取脚本

3. 快速提取脚本

图片加载优化说明

为什么图片没有加载？

解决方案对比

JavaScript 强制加载的原理

Markdown 导出说明

Frequently asked questions

Wechat Article Extractor

File contents

微信公众号文章提取器

概述

快速开始

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

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

详细工作流程

步骤 1: 打开页面并验证

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

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

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

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

步骤 3: 截取页面截图

步骤 4: 提取文章正文

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

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

使用示例

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

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

示例 3: 仅获取正文

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

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

参考脚本

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

2. 完整提取脚本

3. 快速提取脚本

图片加载优化说明

为什么图片没有加载？

解决方案对比

JavaScript 强制加载的原理

Markdown 导出说明

Related skills

Frequently asked questions

How do I install the Wechat Article Extractor skill?

What does the Wechat Article Extractor skill do?

Is Wechat Article Extractor safe to use?

Which AI agents work with Wechat Article Extractor?

Is Wechat Article Extractor free to use?

Who published Wechat Article Extractor?