Chrome Extension Testing MCP

Chrome扩展测试仪——MCP服务器

一 MCP（模型上下文协议）服务器 这让Claude可以使用Playwright交互式地测试任何未打包的Chrome扩展程序。加载您的扩展程序，与其弹出窗口和选项页面交互，检查存储，监控网络请求，检查徽章，测试消息传递等等——所有这些都是通过自然语言完成的。

______________________________________________________________________

目录

• 特性
• 需求
• 安装
• 使用Claude Desktop进行设置
• 使用克劳德代码（npx）进行设置
• 可用工具
• 测试代理提示
• 示例提示
• 项目结构
• 备注

______________________________________________________________________

特性

• 加载并重新加载任何未打包的Chrome扩展程序
• 与弹出窗口和选项页面交互（点击、键入、阅读内容）
• 检查和操作 chrome.storage （本地/同步/会话）
• 读取后台服务工作器控制台日志
• 监控和检查网络请求
• 检查并确认徽章文本和颜色
• 向后台脚本发送消息并验证响应
• 模拟选项卡打开/关闭/切换事件
• 测试上下文菜单注册和处理程序调用
• 运行返回结构化PASS/FAIL结果的断言
• 在测试过程中随时截取屏幕截图
• 使用一次性电子邮件在任何网站上创建和重复使用测试帐户（通过Guerrilla Mail API）

______________________________________________________________________

需求

• Node.js 18岁或以上
• 克劳德桌面版 或 克劳德代码 支持MCP
• Chrome扩展程序 manifest.json （清单V2或V3）

______________________________________________________________________

安装

选项A--npx（无需安装）

npx chrome-extension-tester-mcp

选项B--全局安装

npm install -g chrome-extension-tester-mcp

选项C——克隆并在本地运行

git clone https://github.com/BHUVAN-RJ/chrome-extension-testing-mcp.git
cd chrome-extension-testing-mcp
npm install
npx playwright install chromium

______________________________________________________________________

使用Claude Desktop进行设置

将以下内容添加到您的Claude Desktop MCP配置文件中：

macOS/Linux — ~/.config/claude/claude_desktop_config.json 视窗 — %APPDATA%\Claude\claude_desktop_config.json

使用npx（推荐）

{
  "mcpServers": {
    "chrome-extension-tester": {
      "command": "npx",
      "args": ["chrome-extension-tester-mcp"]
    }
  }
}

使用本地克隆

{
  "mcpServers": {
    "chrome-extension-tester": {
      "command": "node",
      "args": ["/absolute/path/to/chrome-extension-testing-mcp/src/index.js"]
    }
  }
}

保存配置后重新启动Claude Desktop。

______________________________________________________________________

使用克劳德代码（npx）进行设置

添加到您的项目 .mcp.json 或用户级MCP配置：

{
  "mcpServers": {
    "chrome-extension-tester": {
      "command": "npx",
      "args": ["chrome-extension-tester-mcp"]
    }
  }
}

______________________________________________________________________

可用工具

______________________________________________________________________

测试代理提示

服务器包括一个内置的MCP提示符，名为 extension-tester-agent --一个完全自动化的测试代理，用于验证所有已实现的更改并返回结构化报告。

参数

它做什么

1. 理解 扩展并从更改列表中导出一组测试
2. 编写测试计划 --每个更改都映射到至少一个测试和正确的MCP工具
3. 执行每个测试 --从不跳过，在失败时截图
4. 报告 一个结构化的通过/失败表，其中包含任何失败的详细信息

如何调用

实施更改后，告诉Claude：

Use the extension-tester-agent prompt with:
- extension_path: /path/to/my-extension
- extension_description: "A tab manager that saves sessions to chrome.storage.local and restores them via a popup"
- changes: "Added save button; save button writes open tabs to storage.local; badge shows count of saved tabs"

Claude将编写测试计划，执行每个测试，并返回完整的报告。

______________________________________________________________________

示例提示

Load my extension from /Users/me/my-extension and open the popup

Click the button with selector #save and take a screenshot

Navigate to https://example.com and check if my content script injected a .banner element

Read all keys from chrome.storage.local

Set { "enabled": true } in chrome.storage.local and verify it was saved

Navigate to https://example.com, capture all network requests, then show me any that were blocked

Check the badge text — it should say "ON"

Send the message { "type": "GET_STATUS" } to the background and show the response

Open a tab to https://news.ycombinator.com, then another to https://github.com, then list all open tabs

Right-click on https://example.com and trigger the context menu item with id "my-action"

Create a test account on https://example.com/signup and save it as "my_test_account"

Log in to https://example.com/login using the stored "my_test_account" credentials

______________________________________________________________________

项目结构

chrome-extension-testing-mcp/
├── src/
│   ├── index.js              # MCP server entry point
│   ├── state.js              # Shared browser state and helpers
│   ├── prompts/
│   │   ├── index.js          # Registers MCP prompts
│   │   └── extension-tester.js  # extension-tester-agent prompt definition
│   └── tools/
│       ├── index.js          # Aggregates all tool definitions and handlers
│       ├── load-extension.js
│       ├── popup.js
│       ├── dom.js
│       ├── logs.js
│       ├── screenshot.js
│       ├── assertion.js
│       ├── storage.js
│       ├── network.js
│       ├── options-page.js
│       ├── context-menu.js
│       ├── badge.js
│       ├── messaging.js
│       ├── tabs.js
│       └── account-login.js
├── package.json
└── README.md

______________________________________________________________________

备注

• 浏览器在中启动 头部模式 （可见窗口），因此您可以实时查看测试运行
• 屏幕截图默认为 ./screenshot.png 除非提供了自定义路径
• 服务工作者日志从那时起就被缓冲 load_extension 被称为
• 呼叫 load_extension 随时再次获取新的浏览器实例
• Playwright无法自动化Chrome原生上下文菜单——使用 test_context_menu 随着 trigger_item 直接调用处理程序
• 徽章和存储工具通过服务人员进行通信，因此扩展必须有一个后台服务人员（MV3）
• test_account_login 使用 游击队邮件API 生成一次性电子邮件——不需要浏览器导航，也不需要机器人拦截。凭据存储在 test-accounts.json 在项目根目录下（将此添加到 .gitignore)
• 使用 action: "auto" 为了 test_account_login 自动重用存储的凭据或创建新帐户（如果不存在）

______________________________________________________________________

许可证

麻省理工学院