Built a Chrome Extension for Instant HTML Preview and Editing

What I Made

https://github.com/tesla0225/html_preview

Available on the Chrome Web Store

https://chrome.google.com/webstore/detail/html-preview/pbgahlbpcanegaeoijeejlkmmfmgcpen?hl=ja&authuser=1
(It cost $5 to register as a developer, even though VS Code was free.)

Features

It "only" previews HTML in the Chrome side panel.

How to Use

1. Click this button in the top right corner of Chrome
   

2. Switch to HTML Preview
   

Copy and paste the HTML

Example 1: When generating HTML with ChatGPT

Example 2: When you want to copy-paste and make minor edits

https://saruwakakun.com/

Example 3: When you want to experimentally build UI components

https://tailwindui.com/

It is an extension that saves you a bit of the trouble of editing in an editor for tasks like these.

Local Installation

Clone from git and click "Load unpacked" below:

Implementation Details

It simply displays the HTML from a textarea in an iframe 😇

Motivation

I learned about the existence of the Side Panel and thought it would be good for previewing HTML, so I created it quickly.
https://developer.chrome.com/docs/extensions/reference/sidePanel/

I initially explored building a mini-browser, but that plan fell through due to iframe restrictions and Side Panel limitations...

Articles That Might Be Helpful

https://zenn.dev/tesla/articles/b0c32fdb4917d2