AI导哈

浏览器视口控制服务

基于TypeScript的MCP服务器，提供高级浏览器视口管理功能，包括自定义视口配置、动态调整和截图捕获。

  • by chipsxp
  • TypeScript
  • 本地部署
  • 1 星标
  • 更新于
在 GitHub 查看 chipsxp/viewport-control

使用说明

视口控制MCP服务器

模型上下文协议（MCP）客户端的高级视口管理和浏览器控制

概述

这个基于TypeScript的MCP服务器提供了复杂的浏览器视口控制功能。它使客户端能够启动具有自定义视口配置的浏览器，动态调整视口大小，并使用各种格式选项捕获屏幕截图。基于Puppeteer，它提供了对浏览器尺寸和渲染参数的精确控制。

核心功能

1.浏览器启动控件

使用精确的视口配置启动浏览器实例：

  • 自定义尺寸（320-3840px宽，240-2160px高）
  • 设备比例因子（1-3x像素密度）
  • 移动仿真切换
  • 屏幕截图选项（格式/质量）

2.动态调整视口大小

在活动浏览器会话中调整视口尺寸：

  • 实时宽度/高度调整
  • 保留格式的屏幕截图
  • 质量可调的图像输出（JPEG/WebP）

3.全面的浏览器管理

  • 全生命周期控制（启动/关闭）
  • 特定于操作系统的Chrome路径检测
  • 无头浏览器操作
  • 页面加载的网络空闲检测

工具规格

launch_browser

参数：

{
  "url": "https://example.com",
  "width": 1200,
  "height": 800,
  "deviceScaleFactor": 2,
  "isMobile": false,
  "imageFormat": "jpeg",
  "imageQuality": 85,
  "fullPage": true
}

能力：

  • 以markdown形式返回页面内容
  • 提供base64编码的屏幕截图
  • 自动检测Chrome安装路径

resize_viewport

参数：

{
  "width": 800,
  "height": 600,
  "imageFormat": "png"
}

输出：

  • 更新了视口尺寸
  • 新页面内容摘要
  • 指定格式的屏幕截图

close_browser

参数： 无 功能： 彻底终止浏览器实例

开发工作流程

设置命令

# Install dependencies
npm install

# Build production version
npm run build

# Watch for changes during development
npm run watch

# Run with MCP inspector for debugging
npm run inspector

安装指南

  1. 克隆存储库：
git clone https://github.com/yourname/viewport-control.git
  1. 配置MCP客户端（克劳德桌面）：
{
  "viewport-control": {
      "timeout": 60,
      "command": "node",
      "args": [ "C:\\Users\\$USRPROFILE$\\something-folder\\whatever-folder\\viewport-control\\build\\index.js" ],
      "transportType": "stdio"
    } 
}

平台说明：

  • Windows:自动检测Chrome安装
  • macOS：默认路径下需要Chrome
  • Linux：需要手动安装Chrome

使用MCP检查器进行调试

  1. 在调试模式下启动服务器：
npm run inspector

  1. 将浏览器连接到提供的URL

  2. 使用检查器功能：

  • 请求/响应跟踪
  • 资源访问监控
  • 工具执行可视化
  • 错误诊断

贡献

  1. 分叉存储库
  2. 创建特征分支
  3. 实施变更
  4. 添加测试用例
  5. 提交拉取请求

许可证

MIT许可证-有关详细信息，请参阅许可证文件

相关 MCP