AI导哈

Chrome DevTools MCP 开发容器

一个在DevContainer中运行Headless Chrome并与Chrome DevTools MCP服务器和GitHub Copilot Chat集成的开发环境，用于自动化浏览器操作。

  • by kk0ga
  • Dockerfile
  • 本地部署
  • 更新于
在 GitHub 查看 fcf-koga/chrome-mcp-devcontainer

使用说明

Chrome MCP开发容器

这个存储库 DevContainer 在中Headless Chrome ，然后单击Chrome DevTools MCP 服务器和GitHub Copilot Chat 的开发环境是。

Chrome 在容器中手动启动chrome-devtools-mcp 的DevTools WebSocket 中描述的相应参数的值
Copilot Chat 中的描述，指定导出选项选项卡页面上创建或编辑条目。

🚀 特徴

  • Ubuntu 24.04 基本DevContainer
  • Google Chrome（stable）の headless 実行
  • 安装日语字体（Noto CJK/IPA）
    → 防止屏幕快照乱码
  • Node.js v20 利用可能
  • chrome-devtools-mcp 的npx 通过启动
  • GitHub Copilot Chat 根据MCP 协作支持

📁 DevContainer 设定

Chrome DevTools WebSocket 传输端口9222MCP 打开服务器VS Code 中所述修改相应参数的值。

{
  "name": "chrome-mcp-devcontainer",
  "build": {
    "dockerfile": "Dockerfile"
  },
  "forwardPorts": [9222],
  "customizations": {
    "vscode": {
      "mcp": {
        "servers": {
          "chrome-devtools": {
            "command": "npx",
            "args": [
              "-y",
              "chrome-devtools-mcp@latest",
              "--browser-url=http://127.0.0.1:9222"
            ],
            "type": "stdio"
          }
        }
      },
      "settings": {
        "chat.mcp.access": "all"
      },
      "extensions": [
        "GitHub.copilot-chat"
      ]
    }
  }
}

🐳 Dockerfile（概要）

Dockerfile 执行以下操作：

  • Google Chrome 安装
  • Node.js 20.x 设置
  • 安装日语字体
    • fonts-noto-cjk
    • fonts-noto-cjk-extra
    • fonts-ipafont-gothic
    • fonts-ipafont-mincho
  • 字体缓存更新

这样，日语网站的显示和截图就不会发生乱码。

🖐 Chrome 是手动启动（重要）

在这个环境中 Chrome 不自动启动。
MCP 来修改标记元素的显示属性DevContainer 在中 手动Headless Chrome 中描述的相应参数的值。

▶️ Chrome 如何手动启动

DevContainer 中的终端：

pkill -f google-chrome || true

google-chrome   --headless   --no-sandbox   --disable-gpu   --disable-dev-shm-usage   --remote-debugging-port=9222   --remote-debugging-address=0.0.0.0   --user-data-dir=/tmp/chrome-debug
  • 这个终点站是 请不要关闭
    （关闭后Chrome 结束）

🧪 Chrome 运行确认

在另一个终端上：

curl http://127.0.0.1:9222/json/version

JSON 如果返回Chrome 正常运行。

🤖 Copilot Chat ー利用例

Chrome 中所述修改相应参数的值Copilot Chat 输入：

#chrome-devtools
https://example.com を開いてスクリーンショットを撮って

屏幕快照将保存在工作区中。

📝 故障排除

❌ 截图被乱码

→日语字体不足
✔ 已在本环境中安装字体

❌ MCP错误：“获取失败”

→ Chrome 未移动/端口无法连接
✔ 手动Chrome 启动

❌ Chrome 立即结束

→ VS Code 表示虽然tmp 阻止写入
✔ 请在安全对话框中按Allow

📚 参考

  • Chrome开发工具MCP
    https://github.com/ChromeDevTools/chrome-devtools-mcp
  • GitHub副驾驶聊天（MCP）
    https://docs.github.com/ja/copilot

🏁 许可证

麻省理工学院

相关 MCP