Claude Code 源码揭秘:GitHub、VS Code、Chrome,三大外挂如何接入

💡 阅读前记得关注+星标，及时获取更新推送

「Claude Code 源码揭秘」系列的第十六篇，上一篇《Claude Code 源码揭秘：为什么它能无感切换 AWS、Google、Azure》。

上一篇聊多云适配，说的是怎么一套代码对接四朵云。但模型服务只是能力的一部分，Claude Code 真正强大的地方在于它能和各种外部工具打通。

让它帮你创建 PR，它会调用 gh pr create。在 VS Code 里选中一段代码问它问题，它能看到你选中的内容。甚至可以让它打开浏览器、点按钮、填表单。

这些能力不是魔法，是集成。翻源码才发现，设计思路很有意思：不是为每个工具写一套专门的代码，而是建立一套通用的协议层，让各种工具都能「插」进来。

GitHub 集成：复用现有认证

Claude Code 和 GitHub 的集成，核心是通过 gh 命令行工具。

// 创建 PRconst result = await bash.execute(  `gh pr create --title "${title}" --body "${body}"`);// 查看 PR 评论const comments = await bash.execute(  `gh api repos/${owner}/${repo}/pulls/${prNumber}/comments`);

为什么用 gh 而不是直接调 GitHub API？因为 gh 帮你处理了认证。只要你本地登录过 GitHub，gh 就能用。不需要在 Claude Code 里再配一遍 token。

这个设计很聪明——复用现有工具的认证状态，不重新发明轮子。

当然，想要更强的 GitHub 能力，可以配置 MCP 服务器，模型就能直接调用 mcp__github__create_issue、mcp__github__search_code 这些专用工具，不用自己拼 gh 命令。CLI 为主，API 为辅，两者结合覆盖面最广。

IDE 集成：让 AI 看到你的编辑器

Claude Code 和 VS Code 的集成，靠的是 claude-code-vscode 扩展。它和 CLI 之间通过 Socket 通信，实时同步编辑器状态。

你在 VS Code 里选中一段代码，扩展就把它发给 Claude Code，作为附件传给模型。诊断信息也是类似的逻辑——VS Code 里有红色波浪线（lint 错误、类型错误），扩展会把这些诊断信息同步过来。这样当你问「帮我修复这个错误」的时候，Claude Code 已经知道是什么错误了。

JetBrains 的集成思路相同，只是用 REST API 轮询代替了 Socket。不同平台用最适合它的通信方式，不强求统一。

Chrome 浏览器集成：让 AI 操作网页

浏览器集成是最复杂的，也是最有想象力的。

很多人一听「AI 控制浏览器」，第一反应是 Puppeteer、Playwright 那套——通过 Chrome DevTools Protocol (CDP) 启动一个无头浏览器，然后用 WebSocket 远程操控。Claude Code 没走这条路。它用的是 Chrome 扩展。

Claude in Chrome 本质上是一个 Chrome Extension，装在你日常使用的浏览器里，通过 Chrome Extension API 操作页面。然后扩展跟本地的 MCP Server 通信，Claude Code 再通过 MCP 协议对接这个 Server。

为什么不用 CDP？核心原因是认证状态复用。CDP 方案控制的通常是一个独立启动的浏览器实例，干干净净，什么登录态都没有。你要测一个需要登录的后台页面，得先让 AI 走一遍登录流程，填用户名密码，过验证码，搞不好还有二次认证。

而 Chrome 扩展跑在你日常用的浏览器里，所有的 cookie、session、OAuth token 天然就在那儿。把链接丢给它，它就能直接访问，不需要再走一遍认证流程。这个体感差异非常明显。

配置好之后，Claude Code 拿到的浏览器工具很丰富：

mcp__claude-in-chrome__navigate              # 导航到 URLmcp__claude-in-chrome__computer              # 鼠标键盘操作（点击、输入、截图、滚动）mcp__claude-in-chrome__read_page             # 读取页面可访问性树mcp__claude-in-chrome__find                  # 自然语言查找页面元素mcp__claude-in-chrome__form_input            # 表单填写mcp__claude-in-chrome__javascript_tool       # 执行 JSmcp__claude-in-chrome__read_console_messages # 读取 Console 日志mcp__claude-in-chrome__read_network_requests # 读取网络请求

read_console_messages 能读浏览器控制台日志，前端报错一目了然；read_network_requests 能看网络请求，接口返回什么状态码、什么数据都能拿到。这两个加在一起，基本等于把 Chrome DevTools 的核心调试能力给到了 AI。

还有个 find 工具支持自然语言查找页面元素——跟它说「找到登录按钮」就行，不用写 CSS 选择器。做过浏览器自动化的都知道，元素定位是最脆弱的环节，页面改个 class 名脚本就挂了。用自然语言定位绕开了这个问题，鲁棒性好很多。

我现在写完前端代码，直接让 Claude Code 打开浏览器跑一遍，看页面渲染对不对、console 有没有报错，一句话的事。

通用集成协议：MCP

GitHub、Chrome、VS Code 这些集成看起来各不相同，但底层都通过 MCP（Model Context Protocol）统一。任何想接入 Claude Code 的外部工具，只需要实现一个 MCP 服务器。

MCP 支持三种传输方式：

大部分集成用 stdio 就够了。GitHub、Chrome 都是 stdio 方式——Claude Code 启动一个子进程，通过管道通信。简单可靠，不需要网络配置。

集成外部工具最头疼的是认证，Claude Code 的做法是把认证交给 MCP 服务器。token 配在 MCP 服务器的环境变量里，Claude Code 本身不知道 token 是什么——隔离、灵活、安全，凭证不会出现在对话历史里。

{  "mcpServers": {    "slack": {      "type": "stdio",      "command": "npx",      "args": ["@anthropic-ai/mcp-server-slack"],      "env": {        "SLACK_BOT_TOKEN": "xoxb-xxxx",        "SLACK_TEAM_ID": "T01234567"      }    }  }}

再加上钩子系统，你可以在任何集成操作的前后插入逻辑——比如 GitHub 操作完记个日志，发 Slack 消息前让模型检查敏感信息。

把整个集成流程串起来看：

这套设计教会我什么

看完这套集成架构，几个点印象深刻。

复用现有工具。能用 gh 就不自己调 API，能用浏览器已有的登录态就不让用户再走一遍认证。

统一协议层。MCP 是所有集成的基础，新工具只需要实现 MCP 协议，不用改核心代码。这种设计的好处是解耦——连接器甚至可以是独立进程，通过 stdio 或 HTTP 通信。

认证下沉。凭证放在 MCP 服务器里，主系统不碰敏感信息。

跟着生态走。VS Code 用 Socket，JetBrains 用 REST，GitHub 用 CLI，Chrome 用扩展。不强求统一，而是适配各平台的最佳实践。

我之前做集成的时候，总想搞一套「大一统」的方案，结果发现越统一越别扭。Claude Code 这种「务实适配」的思路更可行——每个工具用最适合它的方式接入，协议层统一就够了。

集成系统是 Claude Code 能力边界的扩展器。没有集成，它只是个聊天机器人；有了集成，它能操作 GitHub、控制浏览器、和各种工具协作，真正成为一个「AI 程序员」。

下一篇聊终端 UI。Claude Code 的命令行界面是怎么实现的？那个实时更新的输出、进度条、交互式选择器，背后用了什么技术？

本文基于 Claude Code 源码分析，主要文件：src/mcp/、src/ide/、src/github/、src/chrome/。