# 5 Things I Learned Building a Chrome Extension That Watches ChatGPT, Claude & Gemini > Source: > Published: 2026-07-16 09:43:05+00:00 I spent the last few months building a Chrome extension that detects HTML code blocks inside ChatGPT, Claude, and Gemini and lets you deploy them straight to a live URL. The "deploy" part turned out to be the easy 20%. The hard 80% was reliably watching three completely different, constantly-changing chat UIs without breaking every other week. Here's what actually taught me something. `MutationObserver` is non-negotiable, but it will still lie to you None of these chat apps render the full response at once — they stream tokens in, which means the DOM you're watching is *incomplete* almost every time your observer fires. My first version tried to detect a finished `
`

block the moment it appeared. Result: I was grabbing HTML mid-stream, cut off halfway through a `
`

.

What actually worked was debouncing on DOM stability instead of DOM presence:

``` js
let debounceTimer;
const observer = new MutationObserver(() => {
  clearTimeout(debounceTimer);
  debounceTimer = setTimeout(scanForCodeBlocks, 600);
});
observer.observe(document.body, { childList: true, subtree: true });
```

600ms of "nothing changed" turned out to be a much more reliable signal than "the tag now exists." Not elegant, but it works across all three sites' streaming speeds.

ChatGPT, Claude, and Gemini all ship frequent frontend updates, and none of them are obligated to keep a stable class name for you to hook into. I initially selected code blocks by class name (`.language-html`

, `.hljs`

, etc.) and had selectors silently break in production within two weeks of launch.

What's held up better: matching on **structural patterns** instead of class names — a `
`

containing a ``

whose text content starts with ``

tag" is wrong more often than you'd think.

I ended up scoring candidate blocks instead of just taking the first match: presence of ``

or ``

scores highest, presence of ``

/``

scores next, and blocks under ~50 characters get discarded outright (usually just an inline example, not a real page). It's not perfect, but it cut false positives dramatically.

`srcdoc`

My first preview implementation just dumped the extracted HTML into an `iframe`

with `srcdoc`

. It worked until someone's AI-generated page included a `