はじめに
Chrome拡張機能を使用して、ChatGPTが生成したコードをプレビューできるようにします。
この機能を使うと、コードを生成してすぐにプレビューを確認できるので、効率よくプログラミングできます。
完成イメージ
手順
Chrome拡張機能を追加します。
以下のリンクから拡張ファイル (manifest.json、content.js、styles.css) をダウンロードします。（コード→Zipをダウンロードして展開）
Chrome ブラウザを開き、 chrome://extensions/に移動します。
右上隅の「開発者モード」を有効にします。
「解凍して読み込む」をクリックし、拡張ファイルが含まれているフォルダを選択します。
拡張機能が追加されます。これで準備完了です。
使い方
ChatGPTにログインします。
「HTMLで適当なアプリを作成して」などのプロンプトを入力すると、コードが生成されると思いますので、実行してください。コードの下にPreview Codeというボタンが表示されるのでクリックすると、プレビューが表示されます。
