今回はChrome拡張機能を使い、業務効率化のツールを作ったためその主な動作を説明します。

ツール作成のきっかけ

ブラウザ上で情報を入力したり、記事を読んでいる時、訳を理解するためにどんな場合でも別画面でGoogleを検索したり、Chat GPT の画面をわざわざ開くことに煩わしさを感じ、業務の効率化を図るための方法として、このツールを考えるきっかけとなりました。

また、他の人がこのツールを使いたい場合、自身のAPIキーを他の人に共有してブラウザ側に保存するのはセキュリティ上良くないと感じ、APIキーをサーバー側に保存することとしました。

ツールの使い方

このツールでできることは以下です。

※公開しているツールはコチラ

利用者がChatGPTのAPIキーを持っていれば、それをこのツールに設定することができます。
また、開発のための特定のサーバーがある場合は、そのサーバーのウェブサイトのアドレスをこのツールに入力することもできます。
WSS:// で始まるWebSocket用のURLを設定すると、リアルタイムでこのツールとやりとりすることもできるようになります。

また、ツールがデフォルトで提供している設定（プロンプトと呼びます）も変更や追加をすることができます。
使うときの手順としては、まずツールに問い合わせたい言葉や文章を選びます。

その後、ツールの小さい開いたウィンドウ（ポップアップ画面と呼びます）を確認すると、先ほど選んだ言葉や文章がそのまま問い合わせ内容として表示されます（※もし、表示されなければ、ウェブブラウザをもう一度読み込むことで解決するかもしれません。

開いたウィンドウで、設定（プロンプト）を使いたい場合は適当なところに挿入し、「生成」ボタンを押します。
すると、数秒から数分後にツールがあなたの問い合わせに対する答え（レスポンス）が表示されます。

ツールの仕組み

このツールの基本的な動作フローです。

Chrome Extension：　ユーザーが情報を入力すると、このChromeの追加機能がその内容をChatGPTに送信するための情報としてキャッチします。
WebSocket：　Chromeの追加機能からの情報は、HTTPSまたはWebSocketという通信手段を用いて送信されます。
Nginx：　入力内容を受け取った後、Nginxというサーバーがこの情報をFastAPIというアプリケーションに転送します。
FastAPI と ChatGPT：　FastAPIは受け取った情報を元に、ChatGPTとの対話を開始します。このとき、WebSocketを活用している場合、対話の結果はリアルタイムでユーザーのブラウザ画面に表示されることとなります。

このような流れを通じて、ユーザーはブラウザ上で簡単に情報の入力とChatGPTとの対話を行うことができるようになりました。
これにより、情報の検索や翻訳作業の効率を大幅に向上させることができるようになりました。

次回もう少し内部の動きを掘り下げて解説します。