The angular-scan Chrome Extension

When I released angular-scan a few months ago, the most common response was: "Can I use this without touching my app's code?"

The answer is now yes.

The angular-scan Chrome extension is a zero-setup companion that brings the same yellow/red flash overlay, counter badges, and toolbar HUD to any Angular app running in dev mode — no npm install, no provider registration, no app restart required.

What it does

Install the extension and open any Angular app running in development mode. The extension detects Angular automatically; click the toolbar icon to start scanning. You get the same visual feedback as the npm library:

Yellow flash — component checked, DOM changed (real render)
Red flash — component checked, DOM unchanged (unnecessary render)
Counter badge — cumulative render count on each host element
Toolbar HUD — draggable panel with live stats and per-component inspector

But the extension adds a layer on top of what the library gives you.

Smart detection

The popup shows exactly what's running on the page:

State	Badge	Popup
Angular dev, scanning off	`OFF` (grey)	`Angular 22 (dev)`
Angular dev, scanning on	ON (green)	`Angular 22 (dev)`
Angular dev, wasted renders	N (red)	count of unnecessary renders in the last tick
Angular (prod)	`PROD` (grey)	`Production build — scan unavailable`
No Angular	silent	`No Angular detected`

Scanning is off by default — the extension never instruments a page until you ask it to. It silently does nothing on non-Angular pages and non-dev builds. No false positives, no noise.

Per-component report

The popup expands into a full per-component table: component name, source file location, total render count, and wasted render count. You can export the full report as JSON or CSV — useful for sharing a snapshot of rendering behavior with your team or attaching to a performance audit.

Source location resolution

This one required some extra work. The extension resolves each component back to its source file using the page's source maps. So instead of seeing AppHeaderComponent, you see AppHeaderComponent — src/app/header/header.component.ts:12. This makes the report actionable without having to cross-reference component names manually.

Architecture

The extension runs across three isolated contexts:

Main-world content script — injects into the page's own JavaScript context (where window.ng lives). This is where the scanner runs: the same ɵsetProfiler hook, the same MutationObserver-based render classification, the same overlay canvas. The only difference is that the code is delivered by the extension rather than your app.config.ts.

Isolated content script — bridges between the main-world script and the extension background. Messages flow through window.postMessage across the context boundary because Chrome content scripts and main-world scripts can't share memory.

Background service worker — holds per-tab state across popup opens/closes. Without this, the popup would reset every time you open it. The service worker persists the latest stats, the current settings, and the detection result so the popup is always consistent with what's on screen.

Seeding existing components

A subtle edge case: when you enable scanning on a page that's already loaded, many components have already mounted and won't run change detection again until user interaction. Without any extra handling, the component inspector would be empty until you start clicking around.

The scanner solves this by walking the entire DOM on enable:

for (const el of document.body.querySelectorAll('*')) {
  const instance = ng.getComponent(el);
  if (!instance) continue;
  this.tracker.ensure(instance, el, componentName(instance), sourceLocation);
}

Every existing component host gets a zero-count entry immediately. The inspector is populated as soon as you open the popup, not after you've interacted with the page.

Why I built it separately

The npm library is the right choice when you own the app and want scanning to always be present during development — a single line in app.config.ts and it's there for your whole team.

But there are situations where that's not an option:

You're auditing a third-party app or a customer's app
You're looking at a deployed dev build you didn't write
You just want to quickly check an app without touching the project at all

The extension handles all of these. It also pairs well with apps you do own — install the extension, and you don't need the npm package at all unless you want CI-level instrumentation or programmatic control.

Requirements

Chrome (MV3)
Angular ≥ 20, running in development mode (ng serve)

Works with both zone.js and zoneless Angular apps.

Install it: angular-scan on the Chrome Web Store

Source: angular-scan on GitHub