# Wechat Chrome Extractor > 使用 chrome-devtools MCP 工具从微信公众号文章页面（mp.weixin.qq.com）提取完整内容。当用户需要访问微信公众号链接、提取文章内容、获取文章全文、总结微信文章、保存文章内容、导出微信文章为 Markdown 时使用此 skill。适用于在 Claude Code 环境中直接使用 chrome-devtools 工具进行文章提取。 - Skill: `gray0128/wechat-chrome-extractor` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds@latest add gray0128/wechat-chrome-extractor` - Raw SKILL.md: https://api.skillmd.com/api/skills/gray0128/wechat-chrome-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-chrome-extractor --- # 微信公众号文章提取器（chrome-devtools 版） ## 概述 使用 chrome-devtools MCP 工具从微信公众号文章页面提取完整内容，包括标题、正文文本、图片。支持快速提取、内容总结和导出 Markdown 文档。 ## 快速开始 ### 方式一：导出为 Markdown（推荐，保存图片） 使用辅助脚本自动提取文章并下载图片： ```bash # 1. 先用 chrome-devtools 提取 HTML 内容 evaluate_script function="() => { const content = document.getElementById('js_content'); return content ? content.innerHTML : ''; }" # 2. 将 HTML 保存为临时文件，然后运行脚本 echo '' | python3 scripts/extract-wechat-chrome-markdown.py ./output-dir "文章标题" "公众号名称" "发布时间" ``` 输出目录结构： ``` output-dir/ ├── 文章标题.md # Markdown 文档 └── images/ # 图片目录 ├── image_001.jpg ├── image_002.png └── ... ``` ### 方式二：完整提取流程（手动） ``` 1. 打开页面 new_page url="https://mp.weixin.qq.com/s/..." 2. 强制加载图片（等待 3 秒后执行） evaluate_script function="(async () => { const images = document.querySelectorAll('img'); let count = 0; images.forEach(img => { let src = img.dataset.src || img.dataset.lazy || img.getAttribute('data-src'); if (src && src !== img.src) { img.src = src; count++; } }); return 'Loaded ' + count + ' images'; })()" 3. 等待图片加载 sleep 3 4. 提取标题和内容 evaluate_script function="() => { const content = document.getElementById('js_content'); return { title: document.title, account: document.querySelector('.rich_media_meta_nickname a')?.innerText || '', time: document.querySelector('.rich_media_meta_text')?.innerText || '', content: content ? content.innerText : document.body.innerText }; }" ``` ### 方式三：快速提取（仅文字） ``` 1. 打开页面 new_page url="https://mp.weixin.qq.com/s/..." 2. 等待加载 sleep 2 3. 提取内容 evaluate_script function="() => { const content = document.getElementById('js_content'); return content ? content.innerText : document.body.innerText; }" ``` ## 核心工作流 ### 步骤 1: 打开页面 使用 `new_page` 工具打开微信文章链接： ``` new_page url="https://mp.weixin.qq.com/s/ARTICLE_ID" ``` ### 步骤 2: 等待加载 微信页面需要时间加载，建议等待 2-3 秒： ``` sleep 2 ``` ### 步骤 3: 强制加载图片（可选） 微信文章使用懒加载，需要执行 JavaScript 触发图片加载： ``` evaluate_script function="(async () => { 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++; } }); return 'Loaded ' + count + ' images, total ' + images.length + ' found'; })()" ``` ### 步骤 4: 提取内容 #### 提取纯文本 ``` evaluate_script function="() => { const content = document.getElementById('js_content'); return content ? content.innerText : document.body.innerText; }" ``` #### 提取 HTML（用于导出 Markdown） ``` evaluate_script function="() => { const content = document.getElementById('js_content'); return content ? content.innerHTML : ''; }" ``` #### 提取完整信息 ``` evaluate_script function="() => { const content = document.getElementById('js_content'); return { title: document.title, account: document.querySelector('.rich_media_meta_nickname a')?.innerText || '', time: document.querySelector('.rich_media_meta_text')?.innerText || '', content: content ? content.innerHTML : document.body.innerText, text: content ? content.innerText : document.body.innerText }; }" ``` ### 步骤 5: 获取页面快照（可选） 查看页面结构和元素： ``` take_snapshot ``` ### 步骤 6: 截取截图（可选） 保存页面截图： ``` take_screenshot filePath="./screenshot.png" fullPage=true ``` ## 清理微信链接 微信文章链接常带有追踪参数，建议清理： **原始链接**： ``` https://mp.weixin.qq.com/s/xxx?clicktime=123&enterid=456&scene=90 ``` **清理后**： ``` https://mp.weixin.qq.com/s/xxx ``` 使用 Python 清理： ```python from urllib.parse import urlparse, parse_qs, urlencode def clean_wechat_url(url): parsed = urlparse(url) if parsed.path.startswith('/s/'): article_id = parsed.path.split('/')[2] return f"{parsed.scheme}://{parsed.netloc}/s/{article_id}" return url ``` ## 导出 Markdown 流程 ### 完整流程示例 用户请求："把这篇微信文章保存为 Markdown，包括图片" **步骤 1**: 打开页面并加载图片 ``` new_page url="https://mp.weixin.qq.com/s/..." sleep 3 evaluate_script function="...强制加载图片的 JS..." sleep 3 ``` **步骤 2**: 提取 HTML 内容 ``` evaluate_script function="() => { const content = document.getElementById('js_content'); return content ? content.innerHTML : ''; }" ``` **步骤 3**: 提取文章信息 ``` evaluate_script function="() => { return { title: document.title, account: document.querySelector('.rich_media_meta_nickname a')?.innerText || '' }; }" ``` **步骤 4**: 使用脚本处理 ```bash # 将 HTML 保存为临时文件 echo '' > /tmp/article.html # 运行脚本 python3 scripts/extract-wechat-chrome-markdown.py ./output "文章标题" "公众号名称" ``` ### 脚本说明 `scripts/extract-wechat-chrome-markdown.py` 脚本功能： 1. 从 stdin 读取 HTML 内容 2. 解析并提取所有图片 URL 3. 使用 curl 下载图片到 `images/` 目录 4. 将 HTML 转换为 Markdown（保留段落、标题、加粗等格式） 5. 保存 Markdown 文件，图片链接替换为本地路径 **使用方式**： ```bash echo '' | python3 scripts/extract-wechat-chrome-markdown.py <输出目录> <文章标题> <公众号名称> <发布时间> ``` ## 常见问题 ### 图片没有加载 微信文章使用懒加载技术，解决方法： 1. **JavaScript 强制加载**（推荐）- 执行上述步骤 3 的代码 2. **滚动页面** - 使用 `evaluate_script` 模拟滚动 ### 内容提取不完整 确保： 1. 页面完全加载后再提取 2. 使用 `#js_content` 选择器 3. 如果 `js_content` 不存在，回退到 `document.body.innerText` ### 链接无法打开 检查链接格式： - 确保是 `mp.weixin.qq.com` 域名 - 清理多余的追踪参数 - 确认链接未过期 ### Markdown 图片不显示 检查： 1. 图片是否正确下载到 `images/` 目录 2. Markdown 中的图片路径是否正确（应该是 `images/image_001.jpg` 格式） 3. 图片 URL 是否有效 ## 输出格式 ### Markdown 格式示例 ```markdown # 文章标题 **来源**：公众号名称 **发布时间**：2026-02-26 --- ## 正文内容 （提取的正文内容，保留原始排版） ![图片](images/image_001.jpg) （更多段落...） --- *使用 wechat-chrome-extractor 提取* ``` ## 工具参考 ### 主要工具 | 工具 | 用途 | 示例 | |------|------|------| | `new_page` | 打开新页面 | `new_page url="..."` | | `evaluate_script` | 执行 JavaScript | `evaluate_script function="() => {}"` | | `take_snapshot` | 获取页面快照 | `take_snapshot` | | `take_screenshot` | 截取屏幕 | `take_screenshot filePath="..."` | | `select_page` | 切换页面 | `select_page pageId=1` | ### 辅助工具 | 工具 | 用途 | |------|------| | `list_pages` | 列出所有页面 | | `close_page` | 关闭页面 | | `navigate_page` | 导航页面 | | `hover` | 悬停元素 | | `click` | 点击元素 | ## 使用示例 ### 示例 1：快速提取并总结 用户：总结一下这篇文章 https://mp.weixin.qq.com/s/xxx 流程： 1. `new_page` 打开链接 2. `sleep 2` 等待加载 3. `evaluate_script` 提取内容 4. 输出总结 ### 示例 2：导出 Markdown 文档 用户：把这篇微信文章保存为 Markdown，包括图片 流程： 1. `new_page` 打开链接 2. `evaluate_script` 强制加载图片 3. `evaluate_script` 提取 HTML 内容 4. `evaluate_script` 获取文章标题和公众号名称 5. 使用 `extract-wechat-chrome-markdown.py` 脚本处理 6. 输出 Markdown 文件和图片目录 ### 示例 3：提取多篇文章 用户：比较这两篇文章... 流程： 1. `new_page` 打开第一篇文章 2. 记录 pageId 3. `new_page` 打开第二篇 4. 分别提取内容 5. 对比分析