npm.io
1.0.2 • Published 3h agoCLI

chrome-browser-plugin

Licence
MIT
Version
1.0.2
Deps
3
Size
853 kB
Vulns
0
Weekly
0
SummaryDependencyVersions

chrome-browser-plugin

MCP 服务：给 AI 提供 Chrome 页面相关工具（截图、DOM 快照、网络请求、设计差异推送等）。

要求：Node.js ≥ 18。

Cursor 安装

{
  "mcpServers": {
    "chrome-browser-plugin": {
      "command": "npx",
      "args": ["-y", "chrome-browser-plugin"]
    }
  }
}

VS Code 安装

VS Code 使用 .vscode/mcp.json（或用户级 MCP 配置），根键是 servers（不是 Cursor 的 mcpServers）。

1. 打开配置

任选其一：

  • 命令面板：MCP: Open User Configuration（全局）
  • 命令面板：MCP: Open Workspace Folder MCP Configuration（工作区 .vscode/mcp.json）
  • 手动创建项目下的 .vscode/mcp.json
2. 写入配置
{
  "servers": {
    "chrome-browser-plugin": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "chrome-browser-plugin"]
    }
  }
}

工具一览

工具 说明 需 MCP 目标页
ping 探活 否
open_url 打开 URL 否
get_active_tab 当前激活 tab 否
get_target_tab 读取 MCP 目标页 否
set_target_tab 设置 / 清除目标页 否
show_design_diffs 推送截图+差异并打开比对弹窗 是
run_automation 在目标页执行 Automation 是
screenshot_tab 整页截图 是
screenshot_design_width 按设计稿宽度（375）截图 是
get_dom_snapshot DOM 几何 / 样式快照 是
get_network_requests 读取 fetch/XHR 缓存 是

页面类工具只操作 Panel「设为 MCP 目标页」钉住的 tab；未设置会报错，不再回退到当前激活页。

show_design_diffs 须传 figmaImageBase64 + pageImageBase64，会聚焦目标页并打开 sl-image-comparer 弹窗；聊天里只提示去插件查看，勿再贴表格。

Keywords

cursormcpchromefigmacopilot