見出し画像

Chrome拡張機能をストア公開しました！ChatGPTクライアント「GPT-ChatDIY」

たぬ

2023/09/04追記
公開されました！

厳密に言えば審査中ですが、「前に作成」していたChrome拡張機能をある程度実用に耐えるように機能追加等行いました。（公開されましたら、ここに一応URLを貼ります。）

具体的には、ローカルストレージに履歴を保存、ダウンロード、削除をできるようにしました。また、簡易的ではありますがコスト試算機能も実装しています。詳細はさらにこの記事内でご紹介します。

また、現時点で審査待ちですが、ストア経由以外でも導入する方法があるので、それもご紹介します。加えて、このクライアントは自前でAPIキーを発行して使用するものですが、なぜそういった実装なのかについてもこの記事内で触れています。

ソースコード全量はGitHubにも公開しています。ご自由にどうぞ（※1）。
開発にはChatGPTを使用しています。ベースとなったもの（2～3h）＋今回の色々（5h）くらいです。こうして公開するまで10hもかからないので、やはり便利ですね。一部テクニカルな実装には難儀したため、そこは手で内容を理解しながら実装しています。なので、8割弱ChatGPT製といった感じです。

※1.GNU General Public License v3.0に基づきます。


機能

この拡張機能はポップアップで呼び出されます。
APIキーを設定した後に、ChatGPT同様にプロンプトを打ち込んで、Send（送信）を押すと、ChatGPTより返答があります。
履歴およびカウンタ（単にやりとりの回数）はローカルストレージに保存されます。
この画面の「Show/hide history」を押すことで表示、非表示を切り替えることができます。

メイン画面

オプション画面では「API キー」の設定、「コスト試算機能」、「履歴のダウンロードおよび削除」、「コスト試算用のカウンタリセット機能」を実装しています。
コスト試算は非常に単純な計算式で実装しているため、詳細はOpenAI社が提供しているダッシュボードから確認してください。
ここで実装しているものは、トークン数を見ているわけでは無く、単にやりとり回数から試算しています。
誤差が発生した場合に、カウンタを操作することで補正することもできます。

また、APIキーは「chrome.storage.sync」に保存されます。
これにより、他のデバイスでも同じGoogleアカウントであれば同期されるので便利です。ただし、履歴はローカルストレージですので、同期されません。
その辺の実装意図は、この記事の下部で簡単に説明します。

一応、ソースコードを見ていただければ分かりますが、いかなる利用者情報もこの開発者（たぬ）には送信していません。

オプション画面

自前でクライアントを作成してAPI経由で叩くメリットとデメリット

使うべきタイミングですが、大きく2つあると思います。それは、
「OpenAIに学習されたくない内容を聞きたいとき」、そして「ChatGPTから『お答えできません』と言われた内容を聞きたいとき」、です。

OpenAIに学習されたくない内容を聞きたいとき

API経由であれば学習に使用しないと明言されています。
厳密に言えば、最近公開された「ChatGPT Enterprise」 と「 API プラットフォーム」においては学習に使用しない、とのことです。

ただし、不正利用監視のため、30日間は履歴を保存するともあるのは留意です。

『お答えできません』と言われた内容を聞きたいとき

通常、アプリ版またはブラウザ版では、内容によっては「お答えしません」等と返されるような内容も、API経由なら回答されるケースがあることを確認しました。（詳細は記述しませんが）
ただし、上記にもある通り、30日間は履歴保持されるので、その辺は意識しないといけません。

その他メリット

API経由で様々やりとりが行えるサービスは広く展開されていますが、それらがどれだけ信用できるか、といった問題もあります。
その提供する企業が、どれだけユーザーが入力した情報を保存し、活用するのかというのは、実のところ不透明です。
規約で明言はしているものの、裏でどのように扱われているか、個人的にはあまり信用できないので、そういうのは使いません。
そういった人は、自前で構築すると安心でしょう。
（OpenAIは無条件で信用するしかないですが。）

また、カスタマイズ性もあります。
自分で作るので、自分の良いように実装できます。

また、こうして実際に作成することでスキルは身につきます。
APIを活用出来ることで、その幅は広がりますね。

デメリット

自分で開発するからには、時間も取られますし、API使用料も発生します。
使用料は非常に安価ではありますが、塵も積もればで、個人で使うにはいささか負担を感じるかも知れません。

今時点で参考までに、「gpt-3.5-turbo」の料金は、1000トークンあたり0.002ドルとなっています。
自分の場合、いつも通り使ってみる25回、テスト用に「あ」だけ返答させる25回で、0.03ドルの請求となっています。（gpt-3.5-turbo使用）

localStorageとchrome.storage.sync

技術的な話ですが、APIキーは「chrome.storage.sync」を使用し、それ以外はローカルストレージ（localStorage）を使用しています。
実のところ、全部ローカルストレージと学習していましたが、明確には違うようです。
もともと、ChatGPTが実装した方だと、APIキーは「chrome.storage.sync」で実装されていました。次に、機能拡張として、追加で指示をした際に「ローカルストレージに保存してください」としたため、このような実装になっています。
しかしながら、これはこれでそれほど間違った実装ではないようで、以下の特徴から良いだろう、と判断しています。

chrome.storage.sync

  1. 同期: ユーザーがGoogleアカウントでログインしている場合、chrome.storage.sync はそのアカウントに関連付けられたすべてのChromeブラウザ間でデータを同期します。

  2. 容量: 各アイテムは最大8,192バイトまで、全体では100,000バイトまで保存できます。

  3. 非同期: APIは非同期であり、コールバック関数を使用してデータを取得します。

  4. 制限: このAPIはChrome拡張機能やChrome Appsでのみ使用できます。

  5. クオータ制限: よく使われる操作にはクオータ制限がありますが、通常は非常に大きいため、ほとんどの用途では問題になりません。

localStorage

  1. 同期: localStorage はブラウザの特定のインスタンスに限定され、データは同期されません。

  2. 容量: 約5MBのデータを保存できます（ブラウザによって異なる場合があります）。

  3. 同期: APIは同期的です、つまりデータは即座に読み書きされます。

  4. 制限: このAPIは標準的なWebページでも使用できます。

  5. セキュリティ: クロスサイトスクリプティング（XSS）攻撃により、localStorage のデータが盗まれるリスクが高いです。

どちらを使うべきか？

  • すべてのデータをユーザーの複数のデバイスに同期させたい場合は、chrome.storage.sync を使用します。

  • 高度なセキュリティを必要とする場合、特にサンドボックス化された環境（Chrome拡張機能など）内であれば、chrome.storage.sync がより安全な選択肢である可能性があります。

  • シンプルなWebアプリケーションで短期間のデータ保存が必要な場合、localStorage は簡単に使用できる選択肢です。

  • 高い可用性とパフォーマンスが求められる場合は、localStorage の同期的なAPIが有利な場合があります。ただし、データの量が多いと、アプリケーションのパフォーマンスに影響を与える可能性があります。

tips

APIの上限を設定しよう

個人で使う際にも、支払い上限を設定するようにしましょう。
万が一バグかミスで大量のリクエストをしてしまう可能性もあるので、支払える範囲で低めに設定しておくと良いでしょう。
また、APIキーが誤って漏れた場合にも被害は最小で済みます。

Usage limitsで設定出来ます。自分は9ドルで警告、10ドルで停止としています。

ChatGPTとのコーディング

現状ZIPファイル丸投げでスムーズに対応してくれることは希です。
なので、具体的にどのファイルを見れば良く、特にコードのこの辺り、等と連携すると、やりとりは最小で済みます。
ただし、一度にごちゃごちゃと書いてもうまく実装してくれなかったりするので、その塩梅は難しいですね。

最初渡して、これが何のファイルかを説明して目的も理解させた後に、
具体的にファイルを指定して、それも理解させてから、
ちょっとずつ機能を混ぜていくのがわりとスムーズにいった流れです。

ストア経由外でChromeに読み込む

chromeのストアを経由せずに、ブラウザに読み込ませることもできます。

任意の所にファイルを全量展開します。

クラウドストレージ配下でも、実体があれば（ダウンロードされていれば）大丈夫です。

chromeの拡張機能からデベロッパーモードをオンにします。
次に、「パッケージ化されていない拡張機能を読み込む」から、そのフォルダを指定すれば、読み込むことができます。

読み込んだイメージ

まとめ

初めて拡張機能公開までやってみましたが、あまり躓かずサクサクできました。（何か差し戻しされて長引きそうですが。）
強いて言えば、サムネイルとか説明文等を準備する必要があり、その辺の時間がかかりましたが、とはいえほぼAI生成なので30分で用意出来ました。
（名前もChatGPTに考えてもらっています。OpenAI公式でも無いのに、ChatGPTと入れるのはいかがかと言われて、いくつか案を出してもらった1つです。）

コーディングについては、確かにある程度ChatGPTが良い感じに実装してくれますが、細かいところ等はどうしても人間による修正が必要だと感じました。時間の問題だと思いますが、今後本当にノータッチで要件だけ指定して作ってくれることでしょう。

ほか、chromeのストアに公開する際には手数料がかかります。何かとお金はかかりますが、Appleストアよりは安価なのでよしとします。（5ドル）

展望としては、今後CSVファイルを指定した場合そのままダウンロードできたり、プロンプトの補助機能等も実装したいですね。
また、現状直前のやりとりを踏まえた返答はできません。それも設定でON、OFFできたら良いなとも思います。

おまけ（拡張機能のサムネイル～ストア用～）

fireflyを使用「愛らしいロボットと人間とのチャットによる対話」というプロンプト
それに文字をオーバーレイしています。

そういえば、noteにも記事のサムネ作成に採用されるようですね。良いですね！

ChatGPTとのやりとり全量は省略させていただきます。
やりとりがもの凄く長いのと、20以上のセッションにまたがるためです。

また、ソースコード全量もここで公開するには厳しいかなと思いますので、GitHubを見ていただければと思います。

zipで落とせます。


この記事が気に入ったらサポートをしてみませんか？