browser-extension-profiling

Compare browser extension builds across branches to identify performance regressions.

Updated Aug 23, 2026
One-click install
npx skills add https://github.com/MajorLift/metamask-extension-skills --skill browser-extension-profiling
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: browser-extension-profiling
Source: https://github.com/MajorLift/metamask-extension-skills/tree/main/domains/performance/skills/browser-extension-profiling
Command: npx skills add https://github.com/MajorLift/metamask-extension-skills --skill browser-extension-profiling

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Identify and quantify performance regressions in browser extensions by comparing builds across branches using standardized profiling workflows.

Core Features & Use Cases

  • WDYR-based profiling to highlight unnecessary re-renders and object allocations.
  • React DevTools Profiler integration for flame graphs and timing analysis.
  • End-to-end benchmarks to measure scenario durations with statistical rigor across branches.

Quick Start

Run the profiling workflow on two branches and compare WDYR, React DevTools Profiler, and E2E benchmark results to identify performance regressions.

Frequently Asked Questions about browser-extension-profiling

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I identify performance regressions in a browser extension across different branches?

To identify browser extension performance regressions, compare builds across branches using standardized profiling workflows that analyze WDYR re-renders, React DevTools Profiler flame graphs, and E2E benchmark durations.

What is the best way to benchmark browser extension rendering and startup times?

The best way to benchmark browser extension rendering and startup times is running end-to-end benchmarks with statistical rigor across branches, combined with React DevTools Profiler and WDYR to isolate unnecessary re-renders and object allocations.

Does browser extension profiling require consistent Chrome versions and reproducible builds?

Yes, browser extension profiling requires consistent Chrome versions and reproducible builds to ensure accurate comparisons when measuring rendering or startup performance changes across branches.

How do I use WDYR and React DevTools Profiler to detect unnecessary re-renders in a browser extension?

Use WDYR to highlight unnecessary re-renders and object allocations, then use React DevTools Profiler integration to analyze flame graphs and component timing to quantify the performance impact on your browser extension.

Can I apply browser extension profiling to refactors and feature toggles?

Yes, you can apply browser extension profiling to refactors, feature toggles, and performance-improvement initiatives to accurately measure their impact on rendering or startup times across different builds.

What are the limitations of using E2E benchmarks for browser extension performance testing?

E2E benchmarks for browser extension performance testing require reproducible builds, consistent Chrome versions, and standardized profiling steps to maintain statistical rigor, meaning any environmental inconsistency can invalidate cross-branch comparisons.