見出し画像

自作Chrome拡張機能「GPT-ChatDIY」の進展

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

すっかりマイブームになりました、Chrome拡張機能(GPT-ChatDIY)の進展です。
マガジンも作成しましたので、そちらにも情報をまとめていきます。

マガジン
GitHub

今時点(23/9/3)でまだ審査中ですが、いくつか機能を追加しました。
具体的には、「多言語対応」と「個人情報チェック機能」を実装しました。
ある程度個人でも組織でも使いやすいものを思想として更新していく予定です。

新しく追加した機能など。
Chromeのストアに申請中のものは「V1.2」
GitHubにコミットしているものは「V1.3」
現在開発中のものは「V1.4」(このスクショのもの)

アップデート予定

以下がアップデート予定です。
実装時期は内容によって前後するかも知れません。

個人情報入力抑止②: 辞書ファイルを登録し、一致する単語があればアラートを出します(V1.4)※予定(機能としては完成。テスト中。)
個人情報マスキング: 一致した個人情報をマスキングします(V1.4)※予定
コスト計算の精度向上: トークン数から計算するようにします(V1.4)※予定
プロンプト補助機能: シーンに応じたプロンプトをサジェストします(V1.x)※予定
個別ダウンロード機能: CSVファイル等で生成されたファイルを直接ダウンロードできます(V1.x)※予定
多言語対応②: 追加の言語をサポートします(V1.x)※予定
連続対話機能: 通常のChatGPTと同様に、直前の対話内容も考慮した対話ができるようになります(ON/OFF切り替え可能)(V2.x)※予定

多言語対応

こちらはもともと日本語だったり英語だったり混在していたので、設定でどちらかに統一できるようにしました。

日本語・英語(一部新しく追加したところは未翻訳)
あと、UIもちょっと改修。

ChatGPTに実装してもらう際には、一気に処理させると不完全になることが多々あったので、分割して依頼しています。
例として実装のサンプルがあると早いですね。

コーディングを一部手伝ってください。
以下は、日本語と英語の言語切り替えの処理です。
「コード」に「追加したいもの」を追加してください。

#コード
function setLanguage(language) {
const settingsTitle = language === 'ja' ? 'GPT-ChatDIY 設定' : 'GPT-ChatDIY Settings';
const apiKeyTitle = language === 'ja' ? 'API キー' : 'API Key';

document.getElementById('settings-title').textContent = settingsTitle; document.getElementById('api-key-title').textContent = apiKeyTitle;

#追加したいもの

##英語
Counter and Cost
Current Counter:
Estimated Cost:
Check the OpenAI Pricing page for accurate billing.
Set Counter Manually:
(中略)
##日本語
カウンターとコスト
現在のカウンター
見積もり費用:
正確な請求については、OpenAIの価格ページを確認してください。
手動でカウンターを設定します:
(中略)

返答。基本的にこれをコピペ。

個人情報チェック(個人情報入力抑止)機能

こちらは正規表現による実装と、辞書とのマッチングによる実装を今時点で行っています。
OpenAI社はAPI経由で学習しないとは言っていますが、そもそも送信してしまうこと自体良くないと思う組織、個人用です。
誤って送信する前にそれを検知してアラートを出します。

現状、辞書登録されているものは絶対に送信されません。
電話番号、郵便番号、メールアドレスと検知したものは、送信するかしないかを選べるようにしています。

今後、それらをマスキングして送信機能もつけようと思います。
また、エラーメッセージにも統一性が無いため、その辺も修正予定です。

オプションの設定画面
アップロード/ダウンロード/削除
ができます。
いわゆるワーニングメッセージ。
いわゆるエラーメッセージ。

コーディングとデバッグ

コーディング

いくらほとんどChatGPTにコーディングしてもらうとは言え、メモ帳だとあまりに見辛いのでサクラエディタを使い始めました。(前からたまに使っていましたが。)

設定→タイプ別設定→半角空白にチェックを入れると、それが可視化されるため、誤って全角の空白が入っている、という事態も防げるので便利ですね。

赤枠の所
半角のスペースがはっきり分かるように。

デバッグ

期待通りに動かないときに、これもブラウザのデバッグ機能を使うと便利です。
今回の場合であれば、拡張機能で右クリック→検証を選択します。

拡張機能の空白箇所で右クリック→検証

そうしたら別ウインドウでDevToolsが立ち上がるので、コンソール→Chatgpt.js(今回であれば)→そして、確認したい処理の行番号を押します。

この時は、マッチしてもしなくても、マッチしません、に遷移してしまうので困ってました。

これでこの行にブレークポイントが設定されます。(青く着色された行)
設定されると、処理はこの行で止まります。
通常の使い方(今回は意図的にチェックにひっかかるようにプロンプトを送信)をすると、そのブレークポイントで処理がストップします。

拡張機能の画面「|▷」を押すと、次のブレークポイントに進みます。

止まった、この時の変数に何が格納されているかを見ることで、問題を特定しやすくなります。

CSVファイル(辞書ファイル)に問題があるのか、
それとも入力を変数に格納する過程に問題があるのか等、特定しやすくなります。

デバッグエリアを作成することも検討できます。
自分は設定の下の方にデバッグエリアを追加しました。

chrome.storage.syncに格納されている値や文字、
ローカルストレージに格納されてる値や文字等を確認できます。

まとめ

こうやって形になってくると楽しいですね。
色々実装したい機能をリストアップして、そこから実装までにかなり速く辿りつける気がします。
また、なぜこういった実装なのかをChatGPTに聞きながらコーディングすることで勉強にもなりますね。


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