Web Page Fetcher MCP

一个通用的 MCP 工具，可以获取任意网页的内容（包括文字和图片），支持需要登录的页面。

安装

方式一：全局安装（推荐）

npm install -g web-fetcher-mcp

然后在 MCP 配置文件中添加：

{
  "mcpServers": {
    "web-fetcher": {
      "command": "web-fetcher-mcp"
    }
  }
}

方式二：使用 npx（无需安装）

{
  "mcpServers": {
    "web-fetcher": {
      "command": "npx",
      "args": ["-y", "web-fetcher-mcp"]
    }
  }
}

各编辑器配置位置

| 编辑器 | 配置位置 | |--------|----------| | Claude Desktop | %APPDATA%\Claude\claude_desktop_config.json (Windows) / ~/Library/Application Support/Claude/claude_desktop_config.json (Mac) | | Cursor | 设置 → MCP → 添加服务器 | | VSCode + Cline/Roo Code | 插件设置中找到 MCP 配置 |

功能概述

• 获取任意网页的文本内容
• 下载网页中的图片并转换为 Base64
• 支持需要登录的页面
• 自动保存和复用登录状态（Cookie）
• 可自定义内容选择器，精准提取页面特定区域
• 页面滚动和导航控制
• 鼠标悬停、表单填写、下拉选择等交互操作
• 文件上传支持
• 元素属性获取和等待

系统要求

• Node.js 18+
• Google Chrome 浏览器

工具列表

1. fetch-web-page

获取网页内容（文字和图片）

参数说明

| 参数 | 类型 | 必填 | 默认值 | 说明 | |------|------|------|--------|------| | url | string | 是 | - | 网页的完整 URL | | contentSelector | string | 否 | 'body' | 内容选择器，用于指定要提取内容的 HTML 元素 | | downloadImages | boolean | 否 | true | 是否下载图片 | | loginMode | string | 否 | 'skip' | 登录模式：skip/auto/manual | | waitForLogin | boolean | 否 | false | 检测到需要登录时是否等待用户手动登录 | | includeHtmlSkeleton | boolean | 否 | false | 是否返回 HTML 骨架结构 |

登录模式说明

| 模式 | 说明 | |------|------| | skip (默认) | 不检测登录状态，直接获取页面内容 | | auto | 使用保存的 Cookie 自动登录 | | manual | 打开浏览器等待用户手动完成登录 |

示例

{
  "name": "fetch-web-page",
  "arguments": {
    "url": "https://cloud.tencent.com/document/product/866/43106"
  }
}

{
  "name": "fetch-web-page",
  "arguments": {
    "url": "https://example.com/article/123",
    "contentSelector": ".article-content"
  }
}

{
  "name": "fetch-web-page",
  "arguments": {
    "url": "https://internal.example.com/dashboard",
    "loginMode": "manual",
    "waitForLogin": true
  }
}

{
  "name": "fetch-web-page",
  "arguments": {
    "url": "https://internal.example.com/dashboard",
    "loginMode": "auto"
  }
}

2. focus-input-element

获取页面输入框焦点，支持通过 CSS 选择器定位元素。

参数说明

| 参数 | 类型 | 必填 | 默认值 | 说明 | |------|------|------|--------|------| | url | string | 否 | 'current' | 网页 URL，使用 'current' 则操作当前已打开的页面 | | selector | string | 是 | - | CSS 选择器 | | useExistingPage | boolean | 否 | true | 是否使用已存在的页面 |

示例

// 通过 ID
{ "selector": "#username" }

// 通过类名
{ "selector": ".search-input" }

// 通过属性
{ "selector": "input[name='email']" }

3. type-input-element

在指定的输入框中输入文本内容

参数说明

| 参数 | 类型 | 必填 | 默认值 | 说明 | |------|------|------|--------|------| | selector | string | 是 | - | CSS 选择器 | | text | string | 是 | - | 要输入的文本 | | clearFirst | boolean | 否 | true | 是否先清空输入框 | | pressEnter | boolean | 否 | false | 输入后是否按回车 |

4. click-element

点击页面上的指定元素

参数说明

| 参数 | 类型 | 必填 | 默认值 | 说明 | |------|------|------|--------|------| | selector | string | 是 | - | CSS 选择器 |

5. capture-element

截取网页或指定元素的截图

参数说明

| 参数 | 类型 | 必填 | 默认值 | 说明 | |------|------|------|--------|------| | selector | string | 否 | - | CSS 选择器，不传则全屏截图 |

6. get-page-info

获取当前页面的信息（HTML骨架、文本内容等）

7. open-devtools

打开浏览器开发者工具

参数说明

| 参数 | 类型 | 必填 | 默认值 | 说明 | |------|------|------|--------|------| | mobileMode | boolean | 否 | false | 是否开启手机设备模拟模式 |

8. get-console-logs

获取浏览器控制台日志

9. scroll-page

滚动页面到指定位置或元素

参数说明

| 参数 | 类型 | 必填 | 默认值 | 说明 | |------|------|------|--------|------| | url | string | 否 | 'current' | 网页 URL，使用 'current' 则操作当前已打开的页面 | | direction | string | 否 | 'down' | 滚动方向：up/down/left/right | | amount | number | 否 | 500 | 滚动的像素量 | | selector | string | 否 | - | CSS 选择器，提供后则滚动到该元素位置 | | useExistingPage | boolean | 否 | true | 是否使用已存在的页面 |

示例

// 向下滚动 500px
{ "direction": "down", "amount": 500 }

// 滚动到指定元素
{ "selector": "#footer" }

10. wait-for-element

等待指定元素出现在页面上

参数说明

| 参数 | 类型 | 必填 | 默认值 | 说明 | |------|------|------|--------|------| | url | string | 否 | 'current' | 网页 URL，使用 'current' 则操作当前已打开的页面 | | selector | string | 是 | - | CSS 选择器 | | timeout | number | 否 | 30000 | 超时时间（毫秒） | | state | string | 否 | 'visible' | 等待状态：attached/visible/hidden | | useExistingPage | boolean | 否 | true | 是否使用已存在的页面 |

示例

// 等待元素可见
{ "selector": ".result-item", "timeout": 10000 }

// 等待元素消失（如 loading）
{ "selector": ".loading", "state": "hidden" }

11. hover-element

鼠标悬停在指定元素上

参数说明

| 参数 | 类型 | 必填 | 默认值 | 说明 | |------|------|------|--------|------| | url | string | 否 | 'current' | 网页 URL，使用 'current' 则操作当前已打开的页面 | | selector | string | 是 | - | CSS 选择器 | | useExistingPage | boolean | 否 | true | 是否使用已存在的页面 |

示例

{ "selector": ".dropdown-trigger" }

12. get-element-attributes

获取页面元素的属性值

参数说明

| 参数 | 类型 | 必填 | 默认值 | 说明 | |------|------|------|--------|------| | url | string | 否 | 'current' | 网页 URL，使用 'current' 则操作当前已打开的页面 | | selector | string | 是 | - | CSS 选择器 | | attributes | string[] | 否 | [] | 要获取的属性名列表，为空则获取所有属性 | | useExistingPage | boolean | 否 | true | 是否使用已存在的页面 |

示例

// 获取所有属性
{ "selector": "#my-link" }

// 获取指定属性
{ "selector": "#my-link", "attributes": ["href", "data-id", "class"] }

13. select-option

选择下拉菜单的选项，支持原生 select 和常见 UI 框架自定义下拉

参数说明

| 参数 | 类型 | 必填 | 默认值 | 说明 | |------|------|------|--------|------| | url | string | 否 | 'current' | 网页 URL，使用 'current' 则操作当前已打开的页面 | | selector | string | 是 | - | CSS 选择器，指向 select 元素或自定义下拉触发元素 | | value | string | 否 | - | 按 option 的 value 属性选择 | | label | string | 否 | - | 按 option 的显示文本选择 | | index | number | 否 | - | 按索引选择（从 0 开始） | | useExistingPage | boolean | 否 | true | 是否使用已存在的页面 |

示例

// 按 value 选择
{ "selector": "#country", "value": "cn" }

// 按显示文本选择
{ "selector": "#country", "label": "中国" }

// 按索引选择
{ "selector": "#country", "index": 0 }

14. navigate-history

浏览器前进或后退导航

参数说明

| 参数 | 类型 | 必填 | 默认值 | 说明 | |------|------|------|--------|------| | direction | string | 否 | 'back' | 导航方向：back(后退) / forward(前进) |

示例

// 后退
{ "direction": "back" }

// 前进
{ "direction": "forward" }

15. upload-file

上传文件到页面上的文件输入框

参数说明

| 参数 | 类型 | 必填 | 默认值 | 说明 | |------|------|------|--------|------| | url | string | 否 | 'current' | 网页 URL，使用 'current' 则操作当前已打开的页面 | | selector | string | 是 | - | CSS 选择器，指向 input[type="file"] 元素 | | filePath | string | 是 | - | 要上传的文件的绝对路径 | | useExistingPage | boolean | 否 | true | 是否使用已存在的页面 |

示例

{
  "selector": "input[type='file']",
  "filePath": "C:/Users/test/document.pdf"
}

16. execute-js

在页面中执行任意 JavaScript 代码并返回结果。可以用于执行复杂的 DOM 操作、获取数据、调用页面上的函数等。

参数说明

| 参数 | 类型 | 必填 | 默认值 | 说明 | |------|------|------|--------|------| | url | string | 否 | 'current' | 网页 URL，使用 'current' 则操作当前已打开的页面 | | script | string | 是 | - | 要执行的 JavaScript 代码 | | useExistingPage | boolean | 否 | true | 是否使用已存在的页面 |

示例

// 点击元素
{ "script": "document.getElementById('btn').click()" }

// 获取元素文本
{ "script": "document.querySelector('.title').textContent" }

// 滚动到底部
{ "script": "window.scrollTo(0, document.body.scrollHeight)" }

// 获取所有链接
{ "script": "Array.from(document.querySelectorAll('a')).map(a => ({text: a.textContent, href: a.href}))" }

// 修改元素样式
{ "script": "document.body.style.backgroundColor = 'lightblue'" }

// 获取页面数据
{ "script": "JSON.stringify({title: document.title, url: location.href, cookies: document.cookie})" }

数据存储

| 数据类型 | 存储位置 | |----------|----------| | Cookie | ~/.web-fetcher-mcp/cookies.json | | 图片 | ~/.web-fetcher-mcp/images/ |

License

MIT