🔍
HTMLを速攻Preview、速攻修正できるChrome拡張機能を作った
作ったもの
Chrome Web Storeにも一応上げています
（Developerとしての登録に$5かかりました、vscodeは無料だったのに）
機能
ChromeのサイドパネルHTMLをプレビューする「だけ」
使い方
-
Chromeの右上のこのボタンを押す
-
HTML Previewに切り替える
HTMLをコピペして貼る
例1. ChatGPTでhtmlを生成する際
例2. コピペしてちょい修正したい時
例3. UIコンポーネントを実験的に組み立てたい時
など、エディタで編集する手間がちょっと省ける拡張機能です。
ローカルインストール
gitからcloneして、以下の「パッケージ化されていない拡張機能を読み込む」をクリック
実装の中身
textareaのhtmlをiframeで表示しているだけです😇
きっかけ
SidePanelなるものがあることを知ったので、htmlのPreviewに良さそうかなと思いサクッと作成しました。
ミニブラウザを作ろうと最初は模索したのですが、iframeの制約やsidepanelの限界等々で頓挫しました...
お役に立てるかもしれない記事
Discussion