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.
1. 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 <pre><code> block the moment it appeared. Result: I was grabbing HTML mid-stream, cut off halfway through a <div>.
