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

______________________________________________________________________

🏁 许可证

麻省理工学院