Web Article Extractor

使用 Chrome DevTools MCP 服务器从网页中提取干净的文章内容，支持绕过常见的安全限制。

快速开始

前置条件

确保已配置 chrome-devtools MCP 服务器：

# 添加 chrome-devtools 服务器（带安全绕过参数）
claude mcp add chrome-devtools npx -y chrome-devtools-mcp@latest -- \
  --disable-blink-features=AutomationControlled \
  --disable-web-security \
  --disable-features=IsolateOrigins,site-per-process

基本使用流程

// 1. 获取标签页
const context = await tabs_context_mcp({ createIfEmpty: true });
const tabId = context.availableTabs[0].tabId;

// 2. 导航到目标页面
await navigate({ tabId, url: targetUrl });

// 3. 等待页面加载
await javascript_tool({
  tabId,
  action: "javascript_exec",
  text: `new Promise(r => {
    if (document.readyState === 'complete') r();
    else window.addEventListener('load', r);
  })`
});

// 4. 使用 Readability 提取（推荐）
const readabilityScript = await fs.readFile(
  '~/.claude/skills/web-article-extractor/scripts/readability_extractor.js',
  'utf8'
);

const result = await javascript_tool({
  tabId,
  action: "javascript_exec",
  text: readabilityScript
});

const article = JSON.parse(result);

微信公众号专用流程

微信公众号有多层安全防护，需要特殊处理：

完整提取脚本

async function extractWeChatArticle(articleUrl) {
  // 1. 连接到浏览器
  const tabs = await tabs_context_mcp({ createIfEmpty: true })
  const tabId = tabs.availableTabs[0].tabId

  // 2. 设置微信 User-Agent（关键步骤）
  await javascript_tool({
    tabId,
    action: "javascript_exec",
    text: `
      Object.defineProperty(navigator, 'userAgent', {
        get: () => 'Mozilla/5.0 (iPhone; CPU iPhone OS 16_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148 MicroMessenger/8.0.38(0x18002633) NetType/WIFI Language/zh_CN'
      });
      'User-Agent set to WeChat';
    `
  })

  // 3. 导航到文章页面
  await navigate({ tabId, url: articleUrl })

  // 4. 等待页面加载完成
  await javascript_tool({
    tabId,
    action: "javascript_exec",
    text: `
      await new Promise((resolve) => {
        const check = () => {
          const content = document.querySelector('#js_content, .rich_media_content')
          if (content && content.innerText.length > 100) {
            resolve()
          } else if (document.readyState === 'complete') {
            setTimeout(resolve, 2000)
          } else {
            setTimeout(check, 100)
          }
        }
        check()
      })
      'Content loaded';
    `
  })

  // 5. 提取文章内容
  const article = await javascript_tool({
    tabId,
    action: "javascript_exec",
    text: `
      (() => {
        const titleEl = document.querySelector('#activity-name, .rich_media_title')
        const title = titleEl ? titleEl.innerText.trim() : document.title

        const authorEl = document.querySelector('#js_name, .rich_media_meta_text')
        const author = authorEl ? authorEl.innerText.trim() : ''

        const dateEl = document.querySelector('#publish_time, .publish_time')
        const publishTime = dateEl ? dateEl.innerText.trim() : ''

        const contentEl = document.querySelector('#js_content, .rich_media_content')
        let content = ''
        if (contentEl) {
          const clone = contentEl.cloneNode(true)
          clone.querySelectorAll('script, style, noscript').forEach(el => el.remove())
          content = clone.innerText.trim()
        }

        const images = Array.from(document.querySelectorAll('#js_content img'))
          .map(img => img.getAttribute('data-src') || img.src)
          .filter(src => src && !src.includes('placeholder'))

        return JSON.stringify({
          title,
          author,
          publishTime,
          content,
          images,
          url: window.location.href,
          wordCount: content.length
        }, null, 2)
      })()
    `
  })

  return JSON.parse(article)
}

提取方法选择

本技能提供三种提取方法：

Readability.js（推荐） - Mozilla 的成熟提取算法，处理复杂布局更准确
- 详细说明：references/readability-guide.md
- 配置选项：references/config-options.md
简化算法 - 自定义轻量级算法，速度更快但准确度稍低
- 使用脚本：scripts/extract_article.js
自定义选择器 - 针对特定平台的选择器
- 平台指南：references/platform-specific.md

输出格式

Markdown 格式

# 文章标题

**作者：** 作者名称
**发布时间：** 2024-01-15

文章正文内容...

---
来源：[链接](https://example.com)

JSON 格式

{
  "title": "文章标题",
  "author": "作者名称",
  "publishDate": "2024-01-15",
  "content": "完整文章内容...",
  "images": ["url1", "url2"],
  "metadata": {
    "url": "https://example.com/article",
    "wordCount": 1500,
    "readTime": 5
  }
}

进阶主题

最佳实践与优化：references/best-practices.md
特定平台处理：references/platform-specific.md
Readability 详解：references/readability-guide.md
配置选项：references/config-options.md

常见问题

Q: 如何处理需要登录的内容？

A: 使用已登录的浏览器实例，或者在代码中实现登录流程。

Q: 微信文章显示"请在微信中打开"？

A: 需要设置微信 User-Agent（见上面的微信专用流程）。

Q: 如何提高提取成功率？

A: 使用最新版本的 Chrome DevTools MCP，设置正确的启动参数，模拟真实浏览器行为。

技术栈

Chrome DevTools MCP - 浏览器控制和页面操作
Readability.js v0.6.0 - Mozilla 文章提取算法
自定义提取器 - 特殊网站支持（微信、知乎等）

版本更新

v2.0.0 (2025-12-28)

升级 Readability.js 至 v0.6.0
新增 isProbablyReaderable 快速预检测
增强 SEO 元数据提取
完善文档结构

v1.0.0 (2025-11-15)

初始版本
集成 Mozilla Readability.js
支持微信公众号