ChatGPTで出力されたHTMLコードをCodepenに出力、実行も可能な拡張機能『ChatGPT Web Preview』

2024/06/17

ChatGPTで出力されたHTMLやCSS、JSを
即座にCodepenでプレビュー可能な拡張機能。
Web制作にとても便利で、出力されたコードを
即座に編集したり実行が可能です。

リンク先

Chrome / Edge / FireFoxに対応

上記リンク先ページを開きお使いのブラウザのアイコンをクリックします。

それぞれのストアページが開くので「Chromeに追加」をクリックします。

拡張機能を追加をクリックするとインストールが完了します。
アイコンは使わないので、ピン留め表示は不要です。

ChatGPTでコードが出力された時の画面ですが、通常はこのようにコードが表示されるだけとなります。

この拡張機能を導入するとコード出力の下にCodepenでのプレビュー画面が表示され、
実際に動作を確認することができます。
また右下の「Edit on CodePen」をクリックするとCodepenで開くことも可能です。

出力されたコードを即座にCodepenで実行したり、変更したりも可能です。
対応している言語はHTML、CSS、JavaScriptとWeb関連の言語になっているようです。

出力されたコードを即座にプレビューできる便利な拡張機能。
Web制作などでChatGPTを使っている方には便利過ぎる機能です。

よかったらシェアしてください！