🤖

Chrome拡張をChatGPTに作ってもらった

2024/05/16に公開

Chrome拡張

ChatGPT

tech

Stable DiffusionやNovelAIなどのプロンプトを管理するChrome拡張をChatGPTに作ってもらいました。使用した実装技術は以下の通りです。

TypeScript
React

以下は、機能一覧です（ChatGPT作成）。

単語の追加: ユーザーは単語を追加でき、リストに表示されます。
単語の削除: リスト内の単語を削除することができます。
単語の強調: リスト内の単語を強調表示できます（単語が{}で囲まれます）。
単語の強調解除: 強調表示された単語の強調を解除できます。
カンマ区切りの文字列からリストの作成: カンマ区切りの文字列を入力して新しいリストを作成できます。
複数のリストの作成: ユーザーは複数のリストを作成および管理できます。
リストの選択: 作成された複数のリストの中から、アクティブにするリストを選択できます。
単語の結合: リスト内のすべての単語をカンマ区切りの形式で結合できます。

これらの機能を組み合わせることで、ユーザーは単語を編集し、管理し、結合することができる柔軟なChrome拡張機能を利用できます。

このChrome拡張をChatGPTに実装してもらいました。

環境構築と設定

とりあえず雑に要望を出しました。

必要なツールのインストール方法やプロジェクトの初期設定などを教えてくれました。

tsconfig.json や webpack.config.js などの設定内容も丁寧に教えてくれます。これらをコピペしていきます。

Chrome拡張に必要な popup.html、 background.ts、 manifest.json などのファイルとその内容も教えてくれました。これらもコピペしていきます。

ビルドコマンドも設定しておくといいよ！とアドバイスしてくれました。優しいですね。言われたとおりにコマンドを実行したら、無事にビルドが完了しました。

Chromeに読み込む方法も指示されているので、そのとおりにします。

あっという間に、Hello, World的なメッセージが表示される拡張機能が作成できました。

開発

環境ができたので、雑に欲しい機能を取り留めもなく書きました。これちゃんと伝わるのかな？

まず、こちらの要望を整理してくれました。優しい。

Reactの実装コードを出してくれています。コピペします。

CSSも書いてくれています。苦手なので助かりますね。

この時点で、ビルドを指示されたので、実行します。
しかし、以下のようなエラーが出てしまいました。

./src/popup.tsx 73:26-47
[tsl] ERROR in /Users/uchiko/project/my-chrome-extension/src/popup.tsx(73,27)
      TS7053: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ '()': string[]; '{}': string[]; '[]': string[]; }'.
  No index signature with a parameter of type 'string' was found on type '{ '()': string[]; '{}': string[]; '[]': string[]; }'.
ts-loader-default_e3b0c44298fc1c14

わかりませんね、聞いてみましょう。