MynaTest｜一款面向 Web 测试人员的 Chrome MV3 扩展，开箱即用的测试辅助工具集

日常做 Web 功能测试、接口调试、前端问题定位，你是不是经常需要来回切换多个工具：时间戳转换、JSON 格式化、JWT 解码、接口对比、Mock 拦截、环境区分、Bug 截图标注...... 浏览器装一堆插件，工具零散、切换繁琐，还会遇到 MV3 扩展各种权限、沙箱隔离的坑。今天给大家介绍一款开源 Chrome 扩展 MynaTest，把测试高频工具全部整合进浏览器侧边栏，按需启用，插件化扩展，专门为 Web 测试人员打造。

一、项目简介

MynaTest 是基于 Chrome Manifest V3 开发的测试辅助工具集，核心设计理念：工具模块化、侧边栏常驻、按需开启、低侵入网页。

不同于传统浏览器扩展把所有功能全部加载，MynaTest 支持在设置页勾选需要用到的工具，不用的工具不会占用内存。所有工具统一在浏览器右侧侧边栏运行，不用新开标签页，调试页面的同时直接操作工具。

项目开源在 GitHub，采用 MIT 协议，你可以直接下载源码本地加载，也可以二次开发新增自己业务场景需要的测试工具。

💡重要提示：扩展重载之后，一定要刷新目标测试网页，页面内捕获脚本才会生效，如果不刷新，工具捕获网络请求会失效，扩展也会弹出提示提醒刷新页面。

二、快速上手：安装与基础操作

2.1 本地加载扩展

MynaTest 目前需要加载解压包使用，操作步骤非常简单：

Chrome 浏览器地址栏输入 chrome://extensions/，打开扩展管理页面
打开页面右上角开发者模式开关
点击【加载已解压的扩展程序】，选择项目的根文件夹
在浏览器扩展栏点击 MynaTest 图标，即可唤起右侧侧边栏

2.2 侧边栏怎么用

侧边栏是 MynaTest 最主要交互界面，常驻浏览器右侧：

点击各个工具图标，切换到对应工具面板
拖动排序：按住工具图标上下拖拽，自定义工具顺序，松开自动保存配置
鼠标悬浮图标，会弹出工具名称提示，快速识别工具
底部齿轮图标，可以直接跳转扩展设置页面

2.3 设置页管理工具

两种方式进入设置页面：

侧边栏底部点击齿轮图标
扩展图标右键菜单，选择【选项】

设置页将工具分为网络工具、开发工具、测试工具三大分组。只需要勾选想要启用的工具，保存之后侧边栏立刻更新，不需要重启浏览器。不勾选的工具不会被加载运行，减少性能消耗。

三、内置工具详解，覆盖测试绝大多数场景

MynaTest 内置 12 个实用工具，覆盖接口调试、数据处理、环境识别、UI 测试、Bug 协助、正则校验等场景，下面逐个介绍功能：

📡网络工具组

1. 请求对比

做版本回归、环境对比经常需要对比两套环境同一个接口返回是否一致。

这个工具可以捕获两次接口响应，支持JSON 路径级 diff和普通文本行级 diff，高亮两处返回值不一样的地方，快速定位接口变更，不用复制到第三方 diff 网站。

2. 轻量压测

不需要打开 Postman 就可以简单接口压测：捕获浏览器当前页面的接口，一键填充请求参数，支持配置并发次数、请求轮次。

内置响应状态断言、响应内容查看，运行完成之后输出统计指标，还可以直接下载压测报告，适合简单接口稳定性验证。

3. JWT 解析

复制 JWT 字符串粘贴进去，一键解码 Header 头部和 Payload 载荷内容，方便调试登录态、鉴权相关问题。

🛠️开发工具组

4. 时间戳转换

开发测试经常需要时间、时间戳来回换算，支持秒级、毫秒级时间戳双向转换，复制结果一键复制剪贴板。

5. JSON 格式化

粘贴压缩后的 JSON 字符串，一键格式化美化；同时支持压缩 JSON、转义、反转义字符串，处理接口返回乱码转义文本非常方便。

6. 数据对比

独立的数据 diff 工具，可以手动粘贴两段 JSON 或者大段文本，做行级差异对比。和请求对比区别在于，不需要捕获网络请求，手动粘贴任意两份数据就可以对比。

可以查看、导出、导入页面 Cookie、localStorage、sessionStorage，支持登录态快照保存和一键切换。测试不同账号、不同登录状态的时候，可以快速切换环境，不用反复登录账号。

8. 正则测试

一边输入正则，一边输入待匹配文本，实时展示匹配结果。内置 18 套高频正则模板，包含手机号、邮箱、IP 地址、身份证等，测试表单校验直接拿来用。

9. 环境横幅

这是一个非常实用防误生产神器！配置域名匹配规则，当访问开发、测试、预发布环境，页面顶部自动出现彩色提示横幅，一眼区分当前环境，避免测试人员误操作线上生产页面。

可以自定义不同环境横幅颜色、匹配域名。

🧪测试工具组

10. Mock 拦截器

本地调试时拦截指定 URL 请求，返回自定义 Mock 响应。支持多套 Mock 场景配置，一键切换整套 Mock 规则。不需要搭建本地 Mock 服务，浏览器扩展直接拦截页面 fetch/XHR 请求，快速模拟异常返回、边界场景。
注意：基于 MAIN 世界脚本 Hook，无需依赖 webRequest，兼容 MV3 限制。

11. 链接检查

一键扫描当前页面所有<a>链接，批量校验链接是否可访问，识别 404、500 等异常链接，输出跳转地址。做页面回归测试，检查死链接非常高效。

12. 快照对比（UI 像素对比）

选中页面上任意 DOM 元素，捕获基准快照；后续再次捕获，工具做像素级比对，UI 发生变动的地方红色高亮标记出来。适合回归测试，快速发现页面 UI 意外改动。

13. Bug 报告助手

页面框选区域，支持 Canvas 标注涂鸦，自动采集当前页面环境信息（URL、UA 等），方便快速截图编写 bug。
以上所有工具全部按需开启，不用的工具不会在侧边栏显示。

四、核心架构：MV3 下如何实现完整网络捕获

很多做 Chrome 扩展的同学都知道，Manifest V3 中，chrome.webRequest能力被大幅限制，拿不到 responseBody 响应体，很多老的抓包扩展在 MV3 无法完整捕获接口返回内容。MynaTest 巧妙解决这个痛点。

简单梳理整个数据链路：

通过 manifest 声明式注入脚本到页面MAIN 世界，直接 Hook 原生 fetch 和 XHR，拿到完整请求头、请求体、响应头、响应体。
通过window.postMessage把捕获到网络数据，转发给 ISOLATED world 的 content 脚本。
content 脚本通过 Port 长连接，把数据转发给 background Service Worker。
background 做消息缓冲，广播消息给侧边栏。
侧边栏各个工具订阅事件总线，拿到捕获的网络请求数据。

同时针对 MV3 Service Worker 会空闲挂起这个经典问题做了大量健壮性处理：

Service Worker 挂起会导致 Port 断开；侧边栏检测断线自动重连，断开期间请求在后台缓存，重连完成回放消息，不会丢失网络数据包。
content 脚本 Port 断开自动重连。
如果扩展重载，旧网页脚本上下文失效，页面只会弹出一次提醒，提示刷新网页。
检测页面覆盖改写原生 fetch 的时候，会自动重新 hook 保证捕获持续生效。

这一套架构可以给做 MV3 扩展抓包功能的开发者做参考。

五、插件化：如何开发自定义工具

MynaTest 最大亮点之一就是插件化工具机制。如果内置工具无法满足你的业务测试场景，可以非常简单新增自定义工具，不需要改动扩展底层核心代码。

新增工具简要步骤

在tools/目录新建 js 文件，采用 IIFE 立即执行函数，不要使用 ES Module（SidePanel 中 type="module" 会静默失效）
编写 meta 元信息（工具 ID、名称、描述、图标、分类）、render()函数输出 HTML，mount()函数绑定事件，还可以订阅全局事件总线，比如订阅network:request拿到页面捕获到接口数据。
在sidepanel.html、options.html两个页面 body 末尾引入这个 js 脚本。

保存源码，重新加载扩展，刷新页面，你的自定义工具就会自动出现在侧边栏、设置勾选列表。

复制代码

// 最简模板示例
(function () {
  const flashMessage = window.MynaUtils.flashMessage;
  const meta = {
    id: 'my-custom-tool',
    name: '我的自定义工具',
    desc: '业务测试自定义小工具',
    iconUrl: 'icons/my-tool.png',
    category: 'dev',
    categoryName: '开发工具'
  };

  function render(container) {
    container.innerHTML = `<h3>自定义工具面板</h3><button id="demoBtn">测试按钮</button>`;
  }

  function mount(context) {
    context.container.querySelector('#demoBtn').addEventListener('click', ()=>{
      flashMessage('工具运行成功');
    })
    // 订阅网络请求事件
    const off = context.events.on('network:request', payload => {
      console.log('捕获请求', payload.url)
    })
    return ()=> off(); // 返回清理函数，组件销毁取消事件订阅
  }

  window.MynaTools = window.MynaTools || [];
  window.MynaTools.push({meta, render, mount})
})()

工具可以订阅全局事件，其中最常用就是network:request事件，可以拿到 url、method、status、请求体、响应体等完整接口信息。你可以基于这个能力开发业务专属工具，比如业务数据快速校验、自动造数工具等。

六、扩展用到的权限说明

表格

权限	使用场景
storage	保存勾选启用工具列表，存储 Mock 配置、快照、登录态快照
sidePanel	浏览器侧边栏能力
scripting	部分工具注入脚本读写页面存储
activeTab	获取当前标签页信息
cookies	Cookie 管理器读写页面 Cookie
tabs	查询标签 ID、URL
`<all_urls>`	host 权限，脚本注入页面；压测工具绕过 CORS 发起请求

七、适合哪些人？

Web 测试工程师：日常功能、接口、回归测试，减少各种工具来回切换；环境横幅防止误操作生产。
前端开发：调试接口、Mock、快速格式化数据、定位页面问题。
Chrome 扩展二次开发者：可以参考它 MV3 抓包、插件化架构实现思路，基于框架开发自己内部工具。

八、总结

MynaTest 解决了测试人员日常调试的很多痛点：

✅ 全部工具收拢浏览器侧边栏，不用新开标签

✅ Manifest V3 架构，完整捕获 fetch/XHR 请求响应体

✅ 模块化按需启用工具，降低性能开销

✅ 完善异常容错，处理 Service Worker 挂起问题

✅ 简单插件化机制，团队可以快速开发业务工具

✅ 开源 MIT 协议，可以自由修改、内部二次分发

如果你经常做 Web 测试，强烈建议尝试这个扩展，也欢迎基于它开发适合自己团队的测试小工具。

项目地址：https://github.com/tynam-yang/mynatest