Chrome Extension Watching AI Chat UIs: Lessons in Reliability
A Chrome extension that watches AI chat interfaces for code blocks and deploys them to live URLs spent 80% of its development time solving problems no one anticipated. The core idea—extracting complete HTML snippets from streaming responses in ChatGPT, Claude, and Gemini—sounded straightforward, but reliably detecting when a response is truly finished proved far trickier than expected.
Why DOM stability beats presence
None of the major AI chat interfaces render their full responses at once. They stream tokens in real time, leaving the DOM in a perpetual state of flux. Early versions of the extension tried to detect a finished <pre><code> block the moment it appeared, but that often captured incomplete HTML—cut off mid-tag or mid-sentence. The solution was to debounce the MutationObserver using a 600-millisecond timer that only triggers after the DOM remains stable. It’s not elegant, but it works across all three platforms despite their different streaming speeds.
Structural patterns, not class names
AI chat UIs are updated frequently, and none guarantee stable class names for developers to hook into. Relying on selectors like .language-html or .hljs meant the extension’s code selectors broke silently within weeks of launch. A more resilient approach emerged: matching structural patterns instead. The extension now looks for a <pre> containing a <code> whose text starts with <!DOCTYPE or <html. This method ignores whatever CSS framework or dynamic class naming the platform uses this month.
The false positive trap
Even when code is detected, choosing the right code block is a separate challenge. A single AI response can contain multiple snippets—a full HTML page, a CSS explanation, a JavaScript fix. Grabbing the first <pre> tag often picked the wrong one. The fix was to score candidate blocks: presence of <!DOCTYPE> or <html> earns the highest score, <head> or <body> comes next, and snippets under 50 characters are discarded as inline examples. This reduced false positives significantly.
Sandboxing matters more than you think
The first preview version simply injected extracted HTML into an iframe using srcdoc. It worked until an AI-generated page included a <script> that tried to access window.parent—harmless in context, but dangerous in an extension with content-script privileges. The fix was minimal but critical: explicitly locking down the iframe with <iframe sandbox="allow-scripts allow-same-origin">. Small security decisions like this have outsized impact in extensions that interact with live pages.
Users care most about credentials
Early assumptions about user questions—like which hosts are supported—were quickly overturned. The most frequent user question after launch was about authentication and data handling, not platform compatibility.
Why it matters
This project highlights how small, overlooked details in web development—DOM timing, structural selectors, user priorities—can derail otherwise simple tools. It also underscores the importance of defensive programming in browser extensions, where a single un-sandboxed script can turn a convenience feature into a security risk. For developers building tools that interact with dynamic web interfaces, these lessons aren’t optional—they’re the difference between a working extension and one that breaks with every UI update.
Source: DEV Community. AI-assisted editorial synthesis — TechnoExpress.