如何在启用/禁用Chrome扩展时测试页面加载速度及拦截时长

替代Lighthouse的页面加载速度测试方案 #

• Chrome DevTools Performance面板：直接录制启用/禁用扩展时的完整页面加载流程，对比First Contentful Paint、Largest Contentful Paint等核心指标，还能直观看到扩展注入逻辑的耗时占比，精准定位是否有隐性影响。
• 自定义无头Chrome脚本：用无头模式启动Chrome，通过--disable-extensions参数切换扩展状态，编写脚本捕获页面load事件的时间戳，批量统计多页面的加载时间差，适合自动化对比测试。
• Network面板手动统计：在DevTools Network面板中勾选Disable cache，分别在启用/禁用扩展时加载目标页面，查看Finish列的总加载时间，多次取平均值对比。

测量页面拦截时长的工具与方法 #

• DevTools Network面板过滤：在Network面板中过滤你的扩展向外部服务器发送的请求，查看该请求的Start Time到Response End的时间差，这就是外部服务器处理拦截逻辑的时长。
• 扩展内部埋点统计：在扩展的拦截触发代码（比如webRequest.onBeforeRequest回调）中记录起始时间戳，在收到服务器响应后记录结束时间戳，计算差值后通过console.log输出，或存入chrome.storage.local批量导出分析。
• Performance API埋点：在扩展中使用performance.mark()标记拦截流程的开始与结束，再用performance.measure()计算时长，最后通过performance.getEntriesByName()获取数据，这种方式能更规范地整合到性能统计体系中。

内容的提问来源于stack exchange，提问作者rammstein