web-article-extractor

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

前置条件

MCP 服务器配置

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

# 添加 chrome-devtools 服务器
claude mcp add chrome-devtools npx -y chrome-devtools-mcp@latest

浏览器启动参数（绕过安全限制）

为了访问有安全限制的网站（如微信公众号），需要配置 Chrome 启动参数。

方法 1：修改 MCP 配置

编辑 MCP 配置文件，添加 Chrome 参数：

claude mcp remove 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

方法 2：使用环境变量

export CHROME_PATH="/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
export CHROME_ARGS="--disable-web-security --disable-blink-features=AutomationControlled"

重要参数说明：

| --disable-web-security | 禁用同源策略，允许跨域请求

| --disable-blink-features=AutomationControlled | 隐藏自动化特征

| --user-agent | 自定义 User-Agent（模拟微信）

| --disable-features=IsolateOrigins,site-per-process | 禁用站点隔离

微信公众号专用提取流程

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

完整提取脚本

// 微信公众号文章提取
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: `
      // 修改 navigator.userAgent
      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. 导航到文章页面
  try {
    await navigate({ tabId, url: articleUrl })
  } catch (error) {
    if (error.message.includes('not allowed')) {
      // 尝试使用代理或备用方案
      throw new Error('无法访问微信文章，可能需要使用已登录的浏览器')
    }
    throw error
  }

  // 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) // 额外等待2秒
          } 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, .wx_follow_nickname')
        const author = authorEl ? authorEl.innerText.trim() : ''

        // 提取发布时间
        const dateEl = document.querySelector('#publish_time, .publish_time, [data-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, .rich_media_content img'))
          .map(img => img.getAttribute('data-src') || img.src)
          .filter(src => src && !src.includes('placeholder'))

        // 提取摘要
        const descEl = document.querySelector('meta[name="description"]')
        const description = descEl ? descEl.getAttribute('content') : ''

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

  return JSON.parse(article)
}

微信公众号 CSS 选择器参考

| 标题 | #activity-name, .rich_media_title

| 正文 | #js_content, .rich_media_content

| 作者/公众号 | #js_name, .rich_media_meta_text

| 发布时间 | #publish_time, .publish_time

| 图片 | #js_content img, .rich_media_content img

| 摘要 | meta[name="description"]

通用文章提取流程

方法选择

本技能提供两种文章提取方法：

• Readability.js（推荐） - Mozilla 的成熟提取算法，处理复杂布局更准确

• 简化算法 - 自定义轻量级算法，速度更快但准确度稍低

步骤 1：获取标签页上下文

const context = await tabs_context_mcp({ createIfEmpty: true })
const tabId = context.availableTabs[0].tabId

步骤 2：导航到页面

await navigate({ tabId, url: targetUrl })

步骤 3：等待页面加载

// 等待 DOM 加载完成
await javascript_tool({
  tabId,
  action: "javascript_exec",
  text: `new Promise(r => window.addEventListener('load', r))`
})

步骤 4：提取内容

方法 A：使用 Readability.js（推荐，最准确）

// 读取 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);
console.log('提取结果:', article);
// article 包含: title, content, contentHtml, author, wordCount, images, headings 等

方法 B：使用简化提取算法（更快）

// 读取简化提取脚本
const extractScript = await fs.readFile(
  '~/.claude/skills/web-article-extractor/scripts/extract_article.js',
  'utf8'
);

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

const article = JSON.parse(result);

方法 C：使用内联 JavaScript 提取（最简单）

const content = await javascript_tool({
  tabId,
  action: "javascript_exec",
  text: `
    JSON.stringify({
      title: document.querySelector('h1')?.innerText || document.title,
      content: document.querySelector('article, main')?.innerText || document.body.innerText,
      author: document.querySelector('.author, [name="author"]')?.innerText || ''
    })
  `
})

isProbablyReaderable - 快速预检测

什么是 isProbablyReaderable？

isProbablyReaderable() 是一个快速、轻量级的检测函数，用于判断页面是否适合使用 Readability 进行内容提取。它在不执行完整解析的情况下，快速评估页面的"可读性分数"。

使用场景

• 性能优化 - 避免在不合适的页面上运行完整的 Readability 解析

• 用户体验 - 提前判断是否显示"阅读模式"按钮

• 批量处理 - 快速筛选大量页面，只处理适合的内容

基本用法

// 检查当前页面是否适合提取
if (isProbablyReaderable(document)) {
  // 页面适合提取，执行完整解析
  const article = new Readability(document.cloneNode(true)).parse();
  console.log('提取成功:', article.title);
} else {
  console.log('此页面可能不适合内容提取');
}

配置选项

const options = {
  // 最小内容长度（字符数）
  minContentLength: 140, // 默认: 140

  // 最小可读性分数
  minScore: 20, // 默认: 20

  // 自定义可见性检查函数
  visibilityChecker: (node) => {
    if (!node || node.nodeType !== 1) return false;
    const style = window.getComputedStyle(node);
    return (
      style.display !== 'none' &&
      style.visibility !== 'hidden' &&
      style.opacity !== '0'
    );
  }
};

const isReaderable = isProbablyReaderable(document, options);

完整示例

async function smartExtractArticle(url) {
  // 1. 导航到页面
  await navigate({ tabId, url });

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

  // 3. 使用 isProbablyReaderable 预检测
  const readabilityCheck = await javascript_tool({
    tabId,
    action: "javascript_exec",
    text: `
      // 加载 Readability-readerable.js
      await new Promise((resolve, reject) => {
        const script = document.createElement('script');
        script.src = 'https://cdn.jsdelivr.net/npm/@mozilla/readability@0.6.0/Readability-readerable.min.js';
        script.onload = resolve;
        script.onerror = reject;
        document.head.appendChild(script);
      });

      // 检测是否可读
      const isReaderable = isProbablyReaderable(document, {
        minContentLength: 140,
        minScore: 20
      });

      JSON.stringify({
        isReaderable: isReaderable,
        pageType: document.querySelector('article') ? 'article' : 'other',
        hasMainContent: !!document.querySelector('main, article, .content')
      });
    `
  });

  const check = JSON.parse(readabilityCheck);

  if (!check.isReaderable) {
    console.warn('⚠️ 此页面可能不适合提取，但仍会尝试...');
  }

  // 4. 执行完整提取（即使 isReaderable 为 false，也可以尝试）
  const result = await javascript_tool({
    tabId,
    action: "javascript_exec",
    text: readabilityScript // 使用完整的提取脚本
  });

  return JSON.parse(result);
}

评分机制

isProbablyReaderable 通过以下因素计算可读性分数：

| 段落数量 | 高 | 至少需要一定数量的 <p> 标签

| 内容长度 | 高 | 文本内容需要达到最小长度阈值

| 链接密度 | 中 | 链接与文本的比例不能过高

| 文章结构 | 中 | 检测 <article>, <main> 等语义化标签

| 可见性 | 低 | 内容必须可见（非 display:none）

返回值说明

• true - 页面很可能适合使用 Readability 提取

• false - 页面可能不适合，但不代表完全无法提取

重要提示：即使返回 false，仍可尝试运行完整的 Readability 解析。该函数只是一个快速预判，并非绝对准确。

性能对比

| isProbablyReaderable() | ~5-10ms | 快速扫描 DOM

| Readability.parse() | ~50-200ms | 完整解析和清理

使用预检测可以节省 90% 的不必要处理时间。

Readability.js 详解

什么是 Readability.js？

Readability.js 是 Mozilla 开发的开源文章提取算法，被 Firefox Reader View 功能使用。它能够智能识别网页中的主要内容，自动过滤广告、导航、评论等干扰元素。

主要优势

| 智能内容识别 | 使用复杂算法分析DOM结构，识别主要文章内容

| 自动清理 | 移除广告、导航、社交分享按钮等干扰元素

| 保留格式 | 保留文章的HTML格式（标题、段落、图片、列表等）

| 元数据提取 | 自动提取标题、作者、摘要等元数据

| 跨网站兼容 | 适用于绝大多数新闻、博客、文章类网站

完整使用示例

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

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

  // 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
  });

  // 5. 解析结果
  const article = JSON.parse(result);

  if (!article.success) {
    throw new Error(`提取失败: ${article.error}`);
  }

  return article;
}

// 使用示例
const article = await extractWithReadability('https://example.com/article');

console.log('标题:', article.title);
console.log('作者:', article.author);
console.log('字数:', article.wordCount);
console.log('阅读时长:', article.readingTime, '分钟');
console.log('可读性检测:', article.readerability.isReaderable);
console.log('正文:', article.content);
console.log('HTML:', article.contentHtml);

Readability 配置选项完整说明

根据 Mozilla 官方文档，new Readability(document, options) 支持以下配置选项：

| debug | boolean | false | 是否启用调试日志输出到控制台

| maxElemsToParse | number | 0 | 最大解析元素数量限制（0 = 无限制）

| nbTopCandidates | number | 5 | 分析候选内容时考虑的顶级候选者数量

| charThreshold | number | 500 | 文章必须达到的最小字符数才返回结果

| classesToPreserve | string[] | [] | 保留的 CSS 类名数组（当 keepClasses 为 false 时）

| keepClasses | boolean | false | 是否保留所有 HTML 元素的 class 属性

| disableJSONLD | boolean | false | 禁用 JSON-LD 格式的 Schema.org 元数据解析

| serializer | function | el => el.innerHTML | 自定义内容序列化函数（用于控制 content 属性的生成）

| allowedVideoRegex | RegExp | 内置正则 | 允许保留的视频 URL 正则表达式

| linkDensityModifier | number | 0 | 链接密度阈值修正值（正数提高阈值，负数降低）

配置示例

基础配置（推荐默认）

const reader = new Readability(documentClone, {
  debug: false,
  charThreshold: 500
});

严格模式（高质量文章）

const reader = new Readability(documentClone, {
  charThreshold: 1000,      // 更高的字符要求
  nbTopCandidates: 10,      // 更多候选者分析
  linkDensityModifier: -0.2 // 降低链接密度容忍度
});

宽松模式（短文章）

const reader = new Readability(documentClone, {
  charThreshold: 200,       // 较低的字符要求
  maxElemsToParse: 5000,    // 限制解析元素数
  linkDensityModifier: 0.3  // 提高链接密度容忍度
});

保留样式类（用于进一步处理）

const reader = new Readability(documentClone, {
  keepClasses: false,
  classesToPreserve: [
    'caption',     // 图片说明
    'credit',      // 图片版权
    'figure',      // 图片容器
    'highlight',   // 高亮文本
    'pullquote',   // 引用块
    'code-block'   // 代码块
  ]
});

返回 DOM 元素而非 HTML 字符串

const reader = new Readability(documentClone, {
  serializer: el => el  // 返回 DOM 元素本身
});

const article = reader.parse();
// article.content 现在是 DOM Element，可以进一步处理
const modifiedContent = processDOM(article.content);

自定义视频 URL 白名单

const reader = new Readability(documentClone, {
  allowedVideoRegex: /\/\/(youtube|vimeo|bilibili|youku)\.com/i
});

高级技巧

动态调整配置

async function smartExtract(url, pageType) {
  const configs = {
    'blog': { charThreshold: 300, linkDensityModifier: 0 },
    'news': { charThreshold: 500, nbTopCandidates: 8 },
    'academic': { charThreshold: 1500, disableJSONLD: false },
    'social': { charThreshold: 100, linkDensityModifier: 0.5 }
  };

  const config = configs[pageType] || configs['blog'];
  const reader = new Readability(documentClone, config);
  return reader.parse();
}

返回数据结构

interface ReadabilityResult {
  // === 状态信息 ===
  success: boolean;
  extractionMethod: 'readability' | 'fallback';
  extractedAt: string; // ISO 8601 时间戳
  readabilityVersion: string; // Readability.js 版本号

  // === isProbablyReaderable 预检测结果 ===
  readerability: {
    isReaderable: boolean;
    checkedAt: string;
  };

  // === 核心内容（Readability 原生字段） ===
  title: string;
  content: string;          // 纯文本内容 (textContent)
  contentHtml: string;      // HTML 格式内容 (content)
  excerpt: string;          // 摘要/预览

  // === 元数据（Readability 原生 + 增强） ===
  author: string | null;
  byline: string | null;    // Readability 原生署名字段
  publishDate: string | null; // 增强提取的发布日期
  publishedTime: string | null; // Readability 原生发布时间（新增 v0.6.0）
  siteName: string | null;  // Readability 原生网站名称
  language: string | null;  // Readability 原生语言字段 (lang)
  dir: string | null;       // Readability 原生文本方向 (ltr/rtl)

  // === 内容分析 ===
  wordCount: number;
  contentLength: number;    // Readability 原生字段 (length)
  readingTime: number;      // 预估阅读时长（分钟）

  // === 文章结构 ===
  headings: Array<{ level: number; text: string }>;
  images: Array<{
    src: string;
    alt: string | null;
    width: number | null;
    height: number | null;
  }>;
  tags: string[];
  categories: string[];

  // === URL 信息 ===
  url: string;
  canonicalUrl: string;

  // === SEO 元数据 ===
  metaDescription: string | null;

  // Open Graph
  ogTitle: string | null;
  ogDescription: string | null;
  ogImage: string | null;

  // Twitter Card
  twitterCard: string | null;
  twitterTitle: string | null;
  twitterDescription: string | null;
  twitterImage: string | null;

  // === 其他 ===
  favicon: string | null;
  theme: string | null;
}

字段说明

| title | Readability | 文章标题

| content | Readability (textContent) | 纯文本内容，已去除所有 HTML 标签

| contentHtml | Readability (content) | 保留格式的 HTML 内容

| excerpt | Readability | 文章摘要或预览文本

| byline | Readability | 自动提取的作者署名

| publishedTime | Readability (v0.6.0+) | 自动提取的发布时间

| lang | Readability | 内容语言代码（如 en, zh-CN）

| dir | Readability | 文本方向（ltr 或 rtl）

| length | Readability | 内容长度（字符数）

| siteName | Readability | 网站名称

| readerability | 增强字段 | isProbablyReaderable 检测结果

| author | 增强提取 | 多来源综合提取的作者信息

| images | 增强提取 | 从内容中提取的所有图片信息

| headings | 增强提取 | 文章标题结构（H1-H6）

| readingTime | 计算值 | 基于 200 字/分钟计算的阅读时长

### Readability vs 简化算法对比

| 特性 | Readability.js | 简化算法 |
|------|----------------|----------|
| **准确度** | ⭐⭐⭐⭐⭐ | ⭐⭐⭐ |
| **速度** | ⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ |
| **依赖** | 需要加载外部库 | 无依赖 |
| **文件大小** | ~50KB | ~5KB |
| **复杂网站支持** | 优秀 | 一般 |
| **自定义选择器** | 不支持 | 支持 |

### 最佳实践

#### 1. 提取流程优化

**推荐流程（三层策略）**
```typescript
async function optimizedExtract(url) {
  // 第一层：isProbablyReaderable 快速预检
  const isReaderable = await checkReaderable();

  if (!isReaderable) {
    console.warn('页面可能不适合提取，但仍会尝试');
  }

  // 第二层：使用 Readability 完整提取
  try {
    const article = await extractWithReadability();
    if (article.success && article.contentLength > 500) {
      return article;
    }
  } catch (error) {
    console.error('Readability 失败:', error);
  }

  // 第三层：降级到简化算法
  return await extractWithSimpleAlgorithm();
}

2. 针对不同网站类型的策略

| 新闻网站 | Readability | charThreshold: 500, nbTopCandidates: 8

| 博客文章 | Readability | charThreshold: 300, 默认配置

| 学术论文 | Readability | charThreshold: 1500, keepClasses: true

| 社交媒体 | 简化算法 | Readability 可能过滤过多内容

| 微信公众号 | 自定义选择器 | 需要特殊处理（见微信专用流程）

| 知乎/掘金 | Readability + 自定义 | 结合平台特定选择器

3. 性能优化建议

减少不必要的提取

// 使用 isProbablyReaderable 避免无效提取
if (isProbablyReaderable(document)) {
  await extractFull();
} else {
  // 只提取基本信息
  return { title: document.title, url: location.href };
}

批量提取时的优化

async function batchExtract(urls) {
  // 1. 快速预筛选
  const readableUrls = [];
  for (const url of urls) {
    await navigate(url);
    if (isProbablyReaderable(document)) {
      readableUrls.push(url);
    }
  }

  // 2. 只对通过预检的 URL 进行完整提取
  return Promise.all(readableUrls.map(extractWithReadability));
}

4. 错误处理和降级策略

async function robustExtract(url) {
  const strategies = [
    // 策略 1: Readability with strict config
    () => extract({ charThreshold: 1000 }),

    // 策略 2: Readability with lenient config
    () => extract({ charThreshold: 200, linkDensityModifier: 0.5 }),

    // 策略 3: 简化算法
    () => simpleExtract(),

    // 策略 4: 基础提取
    () => ({ title: document.title, content: document.body.innerText })
  ];

  for (const strategy of strategies) {
    try {
      const result = await strategy();
      if (result.contentLength > 100) {
        return result;
      }
    } catch (error) {
      console.warn('策略失败，尝试下一个:', error);
    }
  }

  throw new Error('所有提取策略均失败');
}

5. 内容质量验证

function validateExtractedContent(article) { const quality = { hasTitle: !!article.title && article.title.length > 5, hasContent: article.contentLength > 500, hasAuthor: !!article.author || !!article.byline, hasImages: article.images && article.images.length > 0, isReaderable: article.readerability?.isReaderable };

const score = Object.values(quality).filter(Boolean).length;