🎡
【ChatGPT】Chrome拡張機能を作ってみた
はじめに
最近、あつすぎます！キョです。
前からフロント関連技術をちょこちょこ勉強していますが、
Vue3とかReactのようなフレームワークを利用した上で勉強しています。
なので、実はまだ基礎になる知識に関する理解はあまりできていないと思っていますので、
一度フレームワーク利用せず、なにかを作って、理解を深めようと思いました。
そして、いろいろ考えて、
Chromeの拡張機能を一つ作ることに決めました。
どんな拡張機能を作る？
私は仕事で、バグ調査を行った後、
調査結果の報告を書く時、
・誤字脱字ないか
・もっとわかりやすく要約できないか
の確認をChatGPTにお願いすることが多いので、
ChatGPTを開く必要なく、
直接APIで連携できる拡張機能を作ろうと思いました。
機能はシンプルで以下になります。
- プロンプトの設定が可能(今回はSystemプロンプトだけ)
- 文字を選択した後、右クリックメニューからAPI呼び出す
- APIからのレスポンスを画面上にダイアログで表示
※元々はもっといろんな機能を実装したかったです。。。
成果物
使い方
1.拡張機能のオプションを設定（翻訳要約例）
2.処理したい文章を選択して、右クリックメニューからAPIを呼び出す
3.処理結果が表示される
コード
※後でTypescriptで一度書き直すかもしれません。
残った課題
一応機能としては実現できましたが、
まだいろいろ課題が残っています。
Typescriptで一回書き直す予定もありますので、
そこで改善したいと思います。
今考えられている課題は以下になります。
- オプション画面での設定済みAPIキーの表示について、何を設定したかわからないので、後4桁とかを表示するようにしたほうがいいと思う
- モデルの選択ができるようにしたい
- 右クリックメニューの「CallApi」をクリックした後、レスポンス戻ってくる間、画面に何も表示しないので、Apiの結果を待っているか、どこかでコケたかわからない
- リクエストとレスポンスの履歴保存、履歴参照の処理がほしい
- デザイン全体がダサい。。。
作りながら考えたこと
作りながら、いろいろ考えました。
具体的には以下になります。
- フロント関連知識を勉強すると、バックエンドの実装を行う時、フロントの考慮もできるようになった
- 改めて互換性の考慮が大事と思った
- まだまだいろいろ知識が足りないことを再度認識できた
最後に
実は今回他の挑戦も一緒にやってみました。
それは「NeoVim + LazyVim」で開発を行ったことです！
まだ使い慣れる段階なので、もっと慣れたらそれに関する共有も行いたいと思います。
それでは、みなさん良い開発ライフをお送りください！
追記(2023/07/24)
まだ新しい機能は追加していないですが、typescriptで一回書き直しました。
Discussion