Chrome extension extracts HTML from ChatGPT, Claude, Gemini
Julie Do's HTML Deployer extension securely deploys HTML code blocks from ChatGPT, Claude, and Gemini to Netlify, GitHub Pages, FTP, or self-hosted servers [DevTo].
Julie Do released HTML Deployer, a Chrome extension that extracts HTML code blocks from ChatGPT, Claude, and Gemini, and deploys the result to a live URL — Netlify, GitHub Pages, FTP, or a self-hosted target [DevTo]. The extension uses a MutationObserver to monitor DOM changes, debouncing rapid bursts and scanning for HTML code blocks after 600 ms of inactivity [MDN Web Docs]. This approach replaces the previous method of capturing code blocks as soon as a <pre><code> appears, which often resulted in half-rendered snippets.
The extension identifies code blocks by structural cues, looking for a <pre> containing a <code> whose text starts with <!DOCTYPE or <html>. It scores candidates based on the presence of <head>/<body> and drops blocks under 50 characters as likely examples. This heuristic reduced false positives by over 70%.
For preview, the extension renders the extracted HTML in an iframe with sandbox="allow-scripts allow-same-origin" and srcdoc. The sandbox prevents cross-origin attacks, such as when a generated script attempts to access window.parent. Credentials never touch Do's servers, and FTP uploads happen directly between the extension and the target host or via a lightweight PHP agent that accepts authenticated uploads without storing passwords.
The extension's approach demonstrates stable detection on volatile UIs, security by design, and a reusable deployment pipeline. By abstracting the deployment step, the extension shows a practical path for developers to turn AI-generated artifacts into production-ready assets without a custom backend. The use of debounce-based observers and structural pattern matching allows the extension to tolerate streaming DOM, frequent UI rewrites, and untrusted code, making it a reliable solution for extracting dynamic content from AI chat UIs [DevTo].
Subscribe to the broadcast.
Daily digest of the day's most important tech news. No fluff. Engineering signal only.
// delivered via substack · double-opt-in confirmation