A Chrome extension that dynamically renders HTML code blocks inline on chat.openai.com the page is being created. Seamlessly view inline HTML code snippets directly in your chat window.
- Toggles between HTML code and rendered previews with a single click
- Supports HTML and SVG code blocks
- Renders code blocks inline within HTML/SVG documents
- Uses a sandboxed iframe to safely display the rendered HTML code
Install the latest version from ChatGPT Extra
- Download the source code from the repository and extract the contents to a folder.
- Open the Chrome browser and navigate to
chrome://extensions/. - Enable the "Developer mode" toggle in the top right corner of the extensions page.
- Click the "Load unpacked" button and select the extracted folder containing the source code.
- The extension should now appear in your list of installed extensions.
- After installing the extension, navigate to a website with supported code blocks.
- The extension will automatically add a "🌐 Toggle Rendering" button to the header of each supported code block.
- Click the "🌐 Toggle Rendering" button to switch between the HTML code and the rendered preview.
- The CSS selectors are fragile and based on the current hard-coded HTML structure and class names. Future updates may require changes to the selectors.
- As it navigates a compiled web page with non human-readable CSS class names, the code is not straightforward to follow. That said, it could bennefit from a significant cleanup.
Contributions are welcome! Please feel free to submit pull requests or report any issues you encounter while using the extension.
This project is licensed under the MIT License.
Filipe Almeida filipe.almeida@gmail.com