ChatGPTを使ってChrome拡張機能を開発してみた

こんにちは、GMOリサーチシステム部のエイシアです。私はChatGPT を使って簡単な Chrome 拡張機能を作成した経験を共有します。私は2017 年からこの経験を得ることを小さな目標としていたのですが、ついにその目標を達成することができました！

(Evidence lol)

今回は、ChatGPTを通じて、基本的なReactアプリの構築およびそれをChrome拡張機能に変換したことについて紹介します。この記事はコーディングというよりも、人工知能との連携に焦点を当てたものとなっています。
また、このプロセスでは、通常の検索エンジンの使用を完全に避け、ステップごとに全てChatGPT頼りとしました。これは理想的な形とは言えませんが、ChatGPTがどこまで私をサポートしてくれるのかを知りたかったためです。

1. はじめに：Brainstorming と Quick Prototyping
2. アプリの構築：成功体験と課題感
　2-1. アプリ構築―成功体験
　2-2. アプリ構築―課題
3. Chrome拡張機能の作成
　3-1. 前提条件
　3-2. 具体的なステップ
4. 結論
　4-1. ChatGPT を効果的に使用するためのヒント

はじめに：Brainstorming と Quick Prototyping

私はChromeの拡張機能に向けたアイデア出しから始めました。ChatGPTは簡単にアイディアをだしてくれるだけでなく、コンセプトの改善や、迅速なフィードバックまで提供してくれました。

Conversation

私：環境構築を含めて2時間で行えるアプリケーションをリストアップしてください。
ChatGPT：もちろんです。2時間という時間枠を考慮すると、比較的簡単でセットアップが複雑ではないプロジェクトを選ぶことが重要です。以下に、検討できるアプリケーションのリストと簡単な説明、および所要時間の推定を示します。

1…
2…
3 Random Quote Generator
4…
…..

私は、MomentumというChrome拡張機能を使っており、これは毎日マントラと呼ばれる励ましのメッセージを表示してくれるものです。私はキリスト教のバックグラウンドを持っており、GMOインターネットグループの代表・熊谷氏も同じであることから、今回は聖書版を作成しようと思い、Random Verse Generator（聖書の一節）を使用しました。

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

続きはこちらのテックブログからご覧ください。

【https://gmor-sys.com/2023/12/22/chrome_extension_with-chatgpt-jpn/】

英語版はこちら
【https://gmor-sys.com/2023/12/22/chrome_extension_with-chatgpt-eng/】