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

1. 使用检查器功能：

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

贡献

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

许可证

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