Chrome拡張をChatGPTに作ってもらう【個人開発】

背景

• あるサイトを見ていたときに、いちいちクリックしないとコンテンツが見れないサイトがあった
• 面倒なので、自動化したい
• 作るのも面倒
  ⇒ChatGPTにお願いしてみよう！
• 個人開発の困ったことや実現方法が思い浮かばないときに参考にできるかも？

ChatGPTについて

• OpenAI社のChatGPTはAIチャットサービスですが、Pythonを中心にプログラムを書かせて、実行させることができる「Advanced Data Analysis」という機能が使えます
• 今回は、Chrome拡張機能のJavaScriptも書かせることができるのか検証してみます。
• 使用するのは、GPT-4とAdvanced Data Analysisになります

手順とプロンプト

①Chromeの拡張機能の開発を手伝ってもらえますか。

(回答)
もちろん、お手伝いします。Chromeの拡張機能の開発に関して、具体的にどのようなサポートを希望されますか？ 

1. 新しい拡張機能のアイディアのブレインストーミング
2. 既存の拡張機能の改善やデバッグ
3. 拡張機能の基本的な構造やコードの書き方
4. その他、特定の機能やコンセプトに関する質問

上記の中から、または他の具体的な要望を教えてください。

②３番です。要件は決まっているのですが、コードのイメージとChrome拡張の独特なコンテキストを知りません。JavaScriptはわかります。
(具体的な要件を書く)
→

了解しました。Chromeの拡張機能を開発する際に必要な基本的なファイルや構造を説明し、その後に要件に合わせたコードの例を提供します。

## 1. Chrome拡張機能の基本的な構造

Chrome拡張機能は主に以下のファイルから構成されます：

- `manifest.json`: 拡張機能のメタデータや動作に関する情報を定義するファイル。
- コンテンツスクリプト： 特定のウェブページに対して動作するJavaScript。

## 2. `manifest.json` の例

（Jsonファイル）

この例では、`content.js`というコンテンツスクリプトを全てのURLに対して適用します。

## 3. `content.js` の例

（javascriptのコード）


このコードは、（コードの補足説明）

これらのファイルを用意して、Chromeの拡張機能ページ (`chrome://extensions/`) から「デベロッパーモード」を有効にし、"パッケージ化されていない拡張機能を読み込む"をクリックして、作成したフォルダを選択すると、拡張機能をロードしてテストすることができます。

この例をベースにして、必要に応じてさらにカスタマイズすることができます。何か追加の情報や質問があれば、お知らせください。

③理解できました。JsonとJSのそれぞれのファイルを準備したあと、Chrome拡張として利用するにはどのようにすればよいか、順序立てて教えてください。
→

了解しました。Chrome拡張機能として利用するための手順を順番に説明します。

### 1. 拡張機能のフォルダを準備する

拡張機能のすべてのファイルを1つのフォルダにまとめます。
- `manifest.json`
- `content.js`

### 2. Chromeを開く

Chromeブラウザを開き、アドレスバーに `chrome://extensions/` と入力して、拡張機能の管理ページにアクセスします。

### 3. デベロッパーモードを有効にする

右上の「デベロッパーモード」をONにします。

### 4. 拡張機能を読み込む

"パッケージ化されていない拡張機能を読み込む" ボタンをクリックして、先ほどの拡張機能のフォルダを選択します。

### 5. 拡張機能の動作確認

拡張機能が正しくロードされたら、Chromeのツールバーに新しいアイコンが表示される場合があります（manifestにアイコンが設定されている場合）。実際に目的のウェブページを開いて、拡張機能が正しく動作するか確認します。

### 6. 必要に応じてデバッグ

拡張機能が期待通りに動作しない場合、`chrome://extensions/` ページで該当の拡張機能の「詳細」をクリックし、"拡張機能のエラー" などのリンクからエラーメッセージやログを確認します。これを元にデバッグを行います。

### 7. 本番用にパッケージ化（オプション）

テストが完了したら、拡張機能を`.crx`ファイルとしてパッケージ化し、Chrome Web Storeに公開することもできます。

以上が、Chrome拡張機能をローカルでテストする基本的な手順です。何か他の質問や追加の情報があれば、お知らせください。

④本番用にパッケージ化ご、どのようにアップロード可能ですか。※脱字してしまいました
→

Chrome拡張機能をChrome Web Storeに公開するための手順を以下に示します。

### 1. Chrome Web Store Developer Dashboardにアクセスする

まず、[Chrome Web Store Developer Dashboard](https://chrome.google.com/webstore/developer/dashboard)にアクセスします。まだアカウントを持っていない場合、Googleアカウントを使用してログインし、開発者登録を行う必要があります。この際、一度だけの登録料が発生することがあります。

### 2. 新しい拡張機能を追加する

ダッシュボード上で「新しいアイテムを追加」ボタンをクリックします。

### 3. 拡張機能の `.zip` ファイルをアップロード

拡張機能のすべてのファイルを一つの `.zip` ファイルに圧縮します。その後、ダッシュボードの指示に従って、この `.zip` ファイルをアップロードします。

### 4. 拡張機能の詳細を記入

アップロードが完了したら、以下の情報を入力または編集します：

- **名前**: 拡張機能の名前。
- **説明**: 拡張機能の簡単な説明。
- **アイコン**: 拡張機能のアイコン。
- **スクリーンショットやビデオ**: 拡張機能の動作を示すスクリーンショットやビデオ。
- **詳細な説明**: 拡張機能の詳しい説明や使用方法。
- **カテゴリ**: 関連するカテゴリを選択。
- **言語**: 主要な言語を選択。

### 5. 公開オプションを選択

公開範囲（例：全てのユーザー、特定のグループなど）や地域を選択します。

### 6. 価格 & 配布

無料で公開するか、有料で公開するかのオプションを選びます。有料の場合、さらなる設定が必要です。

### 7. 拡張機能を公開

すべての情報を正確に入力したら、「公開する」ボタンをクリックして拡張機能を公開します。

以上が、Chrome拡張機能をChrome Web Storeに公開する基本的な手順です。公開後も、ダッシュボードから拡張機能の統計情報を確認したり、アップデートを行ったりすることができます。

• 以上で、実際に拡張機能が完成し、手元のChromeで使用可能になりました。
• 実際に、拡張機能ストアに審査依頼までできました

感想

かなり簡単に拡張機能が作れて驚きました。できる範囲はある程度知っていたほうが早いですが、詳細に成果物を説明してくれるので、助かります。
上記のやり取り以外にもコードの修正やリスクに関する質問の回答をもらっています。　　
作りたいもののアイディアがあれば、まず、ChatGPTに投げてみると良いのかなと思います。
今回は、簡単な動作でしたが、すこし複雑になるものも試してみたいと思います。