内容
[npm-version-image]: https://img.shields.io/npm/v/%40extension.dev%2Fmcp.svg?color=26FFB8
[npm-version-url]: https://www.npmjs.com/package/@extension.dev/mcp
[npm-downloads-image]: https://img.shields.io/npm/dm/%40extension.dev%2Fmcp.svg?color=26FFB8
[npm-downloads-url]: https://www.npmjs.com/package/@extension.dev/mcp
[discord-image]: https://img.shields.io/discord/1253608412890271755?label=Discord&logo=discord&style=flat&color=26FFB8
[discord-url]: https://discord.gg/v9h2RgeTSN
# @extension.dev/mcp [![Version][npm-version-image]][npm-version-url] [![Downloads][npm-downloads-image]][npm-downloads-url] [![Discord][discord-image]][discord-url]
> 为您的AI代理提供浏览器扩展开发的实践能力。33种MCP工具，支持跨浏览器扩展的构建、运行、检查、调试和发布。
<img alt="Logo" align="right" src="https://media.extension.land/brand/extension-dev/logo-dock.png" width="15.5%" />
```bash
claude mcp add extension-dev npx @extension.dev/mcp
```
与Claude Code、Claude Desktop、Cursor以及任何MCP客户端兼容。
[extension.dev](https://extension.dev) · [文档](https://extension.js.org) · [模板](https://templates.extension.dev) · [示例](https://github.com/extension-js/examples) · [Discord](https://discord.gg/v9h2RgeTSN)
## 为什么需要用于扩展的MCP服务器
扩展程序可能无声无息地失败：内容脚本从未注入，面板从未打开，权限返回`undefined`且没有任何错误。编辑文件的代理在没有任何通知的情况下，会高兴地“修复”所有这些问题，但实际上它们都不起作用。
这些工具为代理提供了实时的浏览器视图，使他们能够根据实际情况进行调试，而不是靠猜测：
- **构建**：从[templates.extension.dev](https://templates.extension.dev)提供的60多个模板中构建，或向现有项目添加弹出窗口、侧边栏或内容脚本
- **运行**：在Chrome、Edge、Firefox、Brave、Opera、Vivaldi、Yandex、Waterfox、LibreWolf或任何基于Chromium或Gecko的二进制文件以及macOS上的Safari（暂无HMR）上运行开发服务器，支持热更新，无需构建配置
- **查看**：查看实时DOM、所有扩展上下文的统一日志、`chrome.storage`内容和已加载的扩展列表
- **操作**：在任意上下文中评估代码、触发操作按钮和命令、重新加载扩展、重放事件
- **发布**：跨浏览器验证清单、构建生产版本、发布可分享的预览版并将构建版本提升到发布渠道，无需浏览器交互
基于 [Extension.js](https://extension.js.org)，一个开源的跨浏览器扩展框架。
## 客户端
<div align="center">
| <img alt="Claude Code" src="https://media.extension.land/logos/devtools/claude-code.svg" width="70"> | <img alt="Claude Desktop" src="https://media.extension.land/logos/ai/claude.svg" width="70"> | <picture><source media="(prefers-color-scheme: dark)" srcset="https://media.extension.land/logos/devtools/cursor-dark.svg"><img alt="Cursor" src="https://media.extension.land/logos/devtools/cursor.svg" width="70"></picture> |
| :-: | :-: | :-: |
| Claude Code | Claude Desktop | Cursor |
</div>
## 设置
### Claude Code
```bash
claude mcp add extension-dev npx @extension.dev/mcp
```
或将其作为插件安装，MCP服务器和`/extension`、`/extension-add`、`/extension-debug`和`/extension-publish`命令一步到位：
```
/plugin marketplace add extensiondev/mcp
/plugin install extension-mcp@extensiondev-mcp
```
### Cursor
[](https://cursor.com/en/install-mcp?name=extension-dev&config=eyJjb21tYW5kIjoibnB4IiwiYXJncyI6WyJAZXh0ZW5zaW9uLmRldi9tY3AiXX0%3D)
### Claude Desktop / `.mcp.json`
```json
{
"mcpServers": {
"extension-dev": {
"command": "npx",
"args": ["@extension.dev/mcp"]
}
}
}
```
### 与技能配对
该服务器为代理提供实践能力；[`@extension.dev/skill`](https://www.npmjs.com/package/@extension.dev/skill)为他们提供判断力：跨浏览器规则、无声失败陷阱、调试手册和商店检查清单，以开放的[Agent Skills](https://agentskills.io)格式打包。安装两者后，代理知道在实时浏览器上进行验证，而不是靠猜测，而这些工具使之成为一个调用操作。
```bash
npm i -D @extension.dev/skill
mkdir -p .claude/skills && cp -R node_modules/@extension.dev/skill/skills/extension-dev .claude/skills/
```
### Claude Code项目集成
该软件包提供扩展项目的即装即用指令、斜杠命令和规则：
```bash
# 规则（Claude如何理解您的项目）
cp node_modules/@extension.dev/mcp/claude/CLAUDE.md ~/my-extension/.claude/CLAUDE.md
# 斜杠命令（/extension、/extension-add、/extension-debug、/extension-publish）
mkdir -p ~/my-extension/.claude/commands
cp node_modules/@extension.dev/mcp/claude/commands/*.md ~/my-extension/.claude/commands/
```
## 工具
| 层级 | 工具 | 描述 |
| ---- | ---- | ----------- |
| 构建 | `extension_create` | 从模板构建 |
| 构建 | `extension_list_templates` | 浏览60多个模板 |
| 构建 | `extension_get_template_source` | 读取模板源文件 |
| 构建 | `extension_add_feature` | 添加侧边栏/弹出窗口/内容脚本 |
| 构建 | `extension_build` | 构建生产版本 |
| 运行 | `extension_dev` | 带有HMR的开发服务器 |
| 运行 | `extension_start` | 构建 + 预览 |
| 运行 | `extension_preview` | 预览生产版本 |
| 运行 | `extension_wait` | 轮询开发服务器就绪合约 |
| 运行 | `extension_stop` | 停止开发/启动/预览会话（服务器 + 浏览器） |
| 查看 | `extension_manifest_validate` | 跨浏览器清单验证 |
| 查看 | `extension_inspect` | 构建输出分析 |
| 查看 | `extension_source_inspect` | 实时DOM检查（CDP） |
| 查看 | `extension_dom_inspect` | 无CDP的DOM快照 |
| 查看 | `extension_list_extensions` | 列出已加载的扩展（Chromium） |
| 查看 | `extension_logs` | 流式传输所有上下文的日志 |
| 查看 | `extension_doctor` | 分段诊断开发会话（就绪合约、端口、令牌、执行器、浏览器） |
| 操作 | `extension_eval` | 在上下文中评估（需要`allowEval: true`在`extension_dev`上） |
| 操作 | `extension_storage` | 读取/写入`chrome.storage` |
| 操作 | `extension_reload` | 重载扩展或选项卡 |
| 操作 | `extension_open` | 打开表面/触发`action`、`command` |
| 浏览器 | `extension_install_browser` | 安装托管的浏览器二进制文件 |
| 浏览器 | `extension_uninstall_browser` | 删除托管的浏览器二进制文件 |
| 浏览器 | `extension_list_browsers` | 列出托管的浏览器 |
| 浏览器 | `extension_detect_browsers` | 检测系统浏览器 |
| 平台 | `extension_login` | GitHub设备代码登录，存储令牌 |
| 平台 | `extension_whoami` | 显示存储的登录信息（永不返回令牌） |
| 平台 | `extension_logout` | 删除存储的凭证 |
| 平台 | `extension_publish` | 发布到extension.dev的可分享预览 |
| 平台 | `extension_release_promote` | 将构建版本提升到发布渠道，无需浏览器交互 |
| 平台 | `extension_deploy` | 通过extension.dev提交到Chrome、Firefox和Edge商店 |
启动浏览器工具（`dev`、`start`、`preview`）会调用`extension`CLI，如果存在项目自己的`node_modules/.bin/extension`，否则调用`npx extension@<pinned>`，版本号与此软件包验证的版本相同；其他所有操作都在进程内运行。
## 从预览到商店
平台工具将代理连接到 [extension.dev](https://extension.dev)：`extension_login`运行GitHub设备代码流程并在本地存储项目范围的令牌（永不返回给代理），`extension_publish`将构建版本转换为可分享的预览网址，`extension_release_promote`将测试的构建版本提升到发布渠道，无需浏览器交互。`extension_deploy`通过extension.dev将构建的扩展提交到Chrome网络商店、Edge附加组件和Firefox AMO，extension.dev持有您的商店凭证并从项目的镜像CI调度发布，默认情况下为干运行，商店凭证永不作为工具参数。在实际提交后，`extension_store_status`从项目的公共注册表读取记录的结果、每个商店的凭证健康状况和审查状态，以便代理和CI无需访问控制台即可回答“它被批准了吗？” 。访问令牌最多可使用7天；CI管道从控制台的访问令牌页面重新生成它们。
## extension.dev 堆栈
| 软件包 | 用途 |
| --- | --- |
| [`@extension.dev/skill`](https://www.npmjs.com/package/@extension.dev/skill) | 教AI代理判断力的一半：跨浏览器规则、陷阱、操作手册 |
| [`@extension.dev/artifact-integrity`](https://www.npmjs.com/package/@extension.dev/artifact-integrity) | 验证扩展工件并在发货前阻止CI中的篡改字节 |
所有这些都建立在 [Extension.js](https://github.com/extension-js/extension.js) 之上，这是一个开源的跨浏览器扩展框架。
## 社区
- 加入 [Discord](https://discord.gg/v9h2RgeTSN) 获取帮助和反馈
- 浏览可生产的 [示例](https://github.com/extension-js/examples)
- 在 [GitHub](https://github.com/extension-js/extension.js/issues) 上报告Extension.js框架问题
## 许可证
MIT (c) Cezar Augusto 和 extension.dev 合作者
