awesome-claude-code: Command for Claude Code

抓取网页内容并保存到项目

使用 Chrome DevTools MCP 抓取指定网页的内容，包括文本和图片，保存到本项目中。

参数

• URL: $ARGUMENTS (必填，要抓取的网页地址)
• 保存目录: 请在执行时询问用户

工具说明

工具	返回内容	用途
take_snapshot	基于 A11y 树的文本结构 + 元素 uid	快速了解页面结构、定位元素
take_screenshot	PNG/JPEG 图片	视觉截图
evaluate_script	自定义 JS 返回值	提取 DOM、执行操作、分段加载大页面

关键特性：take_snapshot 和 take_screenshot 都支持 filePath 参数，可将内容保存到临时文件，然后使用 Read 工具分段加载。

执行步骤

1. 导航到目标页面

mcp__chrome-devtools__navigate_page({ type: "url", url: "目标URL" })

2. 检测页面大小

使用 evaluate_script 检测页面规模，决定是否需要分段提取：

mcp__chrome-devtools__evaluate_script({
  function: `() => ({
    totalHeight: document.documentElement.scrollHeight,
    textLength: document.body.innerText.length,
    sectionsCount: document.querySelectorAll('section, article, .content, main').length,
    imagesCount: document.querySelectorAll('img').length
  })`
})

判断标准：

• 文本长度 < 10000 字符 → 小页面，直接提取
• 文本长度 >= 10000 字符 → 大页面，分段提取或使用临时文件

3. 获取页面结构概览

方式 A：直接获取（小页面）

mcp__chrome-devtools__take_snapshot()

用于快速了解页面结构，但注意 snapshot 有 ~25000 令牌限制，超大页面可能报错。

方式 B：保存到临时文件后分段读取（大页面，推荐）

# 步骤 1：保存 snapshot 到临时文件
mcp__chrome-devtools__take_snapshot({ filePath: "/tmp/page-snapshot.txt" })

# 步骤 2：分段读取文件内容
Read(file_path: "/tmp/page-snapshot.txt", limit: 500)           # 前 500 行
Read(file_path: "/tmp/page-snapshot.txt", offset: 500, limit: 500)   # 500-1000 行
Read(file_path: "/tmp/page-snapshot.txt", offset: 1000, limit: 500)  # 1000-1500 行
# 继续按需读取...

临时文件方式的优势：

• 避免单次返回内容过大导致超时或截断
• 可以按需读取特定部分，节省 token
• 文件可复用，多次查阅无需重新抓取

4. 提取页面内容

小页面（< 10000 字符）：直接提取

mcp__chrome-devtools__evaluate_script({
  function: `() => ({
    title: document.title,
    content: document.body.innerText,
    images: Array.from(document.querySelectorAll('img')).map(img => ({
      src: img.src,
      alt: img.alt
    }))
  })`
})

大页面（>= 10000 字符）：多种分段策略

方案 A：保存到临时文件后分段读取（推荐）

// 步骤 1：将完整内容保存到临时文件
mcp__chrome-devtools__evaluate_script({
  function: `() => {
    const content = {
      title: document.title,
      url: window.location.href,
      content: document.body.innerText,
      html: document.body.innerHTML
    };
    return JSON.stringify(content, null, 2);
  }`
})
// 将返回的 JSON 内容写入临时文件
Write(file_path: "/tmp/page-content.json", content: "上面返回的内容")

// 步骤 2：分段读取
Read(file_path: "/tmp/page-content.json", limit: 300)
Read(file_path: "/tmp/page-content.json", offset: 300, limit: 300)
// 继续按需读取...