Iframe Detector

The problem

Modern pages embed dozens of third-party iframes — ads, widgets, trackers, payment frames. When something breaks or leaks inside one of them, engineers and QA have no built-in way to even see which frames are on the page, let alone what they're saying to each other.

The approach

A Chrome MV3 extension that inspects the page in real time: it detects every iframe, classifies it by source and purpose, and provides visual frame highlighting so embedded content can be traced on-screen instead of in a DOM tree.

The deeper feature is postMessage interception — all cross-frame traffic is captured, decoded, and attributed to its sender and receiver, turning the invisible chatter between frames into a readable log. Built with React and TypeScript throughout.

How the interception actually works

postMessage between frames runs in the page's MAIN world — invisible to a normal content script. The extension injects a second, MAIN-world script that patches Window.prototype.postMessage and adds a capture-phase listener; each captured event is relayed to the isolated-world detector through a CustomEvent on document. The detector then resolves event.source back to a frame by the stable id it stamps on every tracked iframe — so every message in the log carries a real sender and receiver, not just an opaque origin.

Three runtime surfaces (popup, content, service worker) talk over typed message contracts — no any, no untyped broadcasts. The popup holds a live port to the content script, which pushes full state on connect and on every iframe-touching DOM mutation (debounced 120 ms). A MutationObserver reconciles the DOM against the tracked-frames map: frames that come and go emit add/remove events into a rolling history, and ids never reset — highlight an ad frame, let the SPA reshuffle the DOM, and your highlight survives because the id did. The toolbar badge shows the live frame count per tab.

Classification runs a deliberate ladder: literal schemes (data:, about:, [srcdoc]) → same-origin → known ad domains → cross-origin. One list, checked in order — the boring kind of correctness you want in a tool whose whole job is telling you what's what.

The outcome

A debugging tool on the Chrome Web Store, with its product site at iframe-detector.com — it turns "something in an iframe is misbehaving" from an afternoon of guesswork into a two-minute lookup, used by engineers and QA alike.