AIでChrome拡張機能を自動作成する方法｜コード不要でブラウザに自分専用ツールを追加する実践ガイド

「毎日同じ操作を繰り返している」「Chromeに自分専用のボタンを追加できたら業務が楽になるのに」——そう感じたことはないでしょうか。Chrome拡張機能を自作すれば解決できますが、「プログラミングを知らない自分には無理」と諦めていた方も多いはずです。

ところが今は、ChatGPTやClaudeに「こんな機能を作ってほしい」と日本語で伝えるだけで、動くコードが手に入る時代になりました。この記事では、プログラミング未経験でもAIを使ってChrome拡張機能を自作できる方法を、コピーして使えるプロンプト例と具体的な手順を交えて解説します。

Chrome拡張機能とは？AIで作れるようになった理由

Chrome拡張機能とは、GoogleのブラウザChromeに後から機能を追加できる小さなプログラムです。パスワード管理の「1Password」や広告ブロックの「uBlock Origin」など、ビジネスパーソンが日常的に使うツールも、実体はChrome拡張機能です。

これまでは自作するためにJavaScriptやHTMLの知識が必要で、エンジニア以外にはハードルが高い領域でした。状況が変わったのは生成AIの登場によるものです。

・日本語でコードを生成できる: 「こんな機能が欲しい」と説明するだけでAIが完成コードを出力します
・エラーも自動修正できる: うまく動かないときにエラーメッセージをそのまま貼り付ければ、AIが原因を特定して修正版を提案します
・技術ハードルが低い: Chrome拡張機能はHTML・CSS・JavaScriptという比較的シンプルな技術で動くため、AIが生成しやすいコードです

2026年9月時点では、ChatGPTやClaudeは数十行から数百行のChrome拡張機能コードをほぼ一発で生成できます。生成されたコードをChromeに読み込むだけで、自分だけのブラウザツールが完成します。

AIでChrome拡張機能を作る具体的な手順

1. 作りたい機能をAIに伝えてコードを生成する

最初のステップは「何を自動化・効率化したいか」を決めることです。以下のような切り口で考えると見つかりやすいです。

・毎日繰り返しているコピー&ペースト作業
・特定のWebページで毎回手入力しているフォームの内容
・ページ内の特定情報を毎回手作業で収集している作業

やりたいことが決まったら、以下のプロンプトテンプレートをChatGPTまたはClaudeに貼り付けてください。

Chrome拡張機能を作成してください。

【機能の説明】
（例: 選択したテキストを右クリックメニューから一発でクリップボードにコピーできる機能）

以下のファイルを全て出力してください。
- manifest.json（manifest_version: 3 を使用すること）
- background.js（必要な場合）
- content.js（必要な場合）
- popup.html と popup.js（ポップアップUIが必要な場合）

各ファイルに日本語コメントを付けてください。
プログラミング未経験者が理解できる程度に詳しく説明してください。

AIが出力例として複数のファイルを返してくれます。それぞれのコードブロックをコピーして、次のステップでファイルとして保存します。

出力イメージ（manifest.jsonの例）:

// manifest.json — 拡張機能の設定ファイル
{
  "manifest_version": 3,
  "name": "テキストコピーツール",
  "version": "1.0",
  "description": "選択テキストを右クリックでコピーする拡張機能",
  "permissions": ["contextMenus", "clipboardWrite"],
  "background": {
    "service_worker": "background.js"
  }
}

2. ファイルをPC上のフォルダに保存する

AIが生成したファイルを、1つのフォルダにまとめて保存します。フォルダ名は半角英数字が無難です（例: `my-copy-tool`）。

ファイルの保存にはメモ帳（Windows）やテキストエディット（Mac）で問題ありません。ただし、以下の2点に注意してください。

・ファイル名と拡張子を正確に付ける: `manifest.json`、`background.js`、`popup.html` など、AIが指定した通りのファイル名にします
・メモ帳の場合はUTF-8で保存: Windowsのメモ帳で保存する際は「名前を付けて保存」→「エンコード: UTF-8」を選択します

ファイル構成の例:

my-copy-tool/
├── manifest.json    ← 拡張機能の設定情報
├── background.js    ← バックグラウンドで動く処理
├── content.js       ← Webページ上で動く処理（必要な場合）
└── popup.html       ← ツールバーアイコンをクリックしたときのUI（必要な場合）

3. ChromeにデベロッパーモードでインストールChromeに読み込む

コマンド操作は不要です。Chrome標準の機能で拡張機能を読み込めます。

（1）Chromeのアドレスバーに chrome://extensions と入力してEnterを押す
（2）画面右上の「デベロッパーモード」トグルをオンにする
（3）「パッケージ化されていない拡張機能を読み込む」ボタンをクリック
（4）先ほど作成したフォルダ（例: `my-copy-tool`）を選択する
（5）拡張機能の一覧に表示されたら読み込み完了

読み込みが成功すると、ツールバーにアイコンが追加されます（ポップアップUIを実装した場合）。Chromeを再起動しても設定はそのまま保持されます。

4. 動作確認とAIを使った修正ループ

実際に使ってみて問題なければ完成です。うまく動かない場合は、Chromeの開発者ツール（F12キー）を開くとエラーメッセージが表示されます。

そのエラーメッセージをそのままAIに渡すと、修正版のコードを提案してくれます。

Chrome拡張機能を読み込んだところ、以下のエラーが発生しました。
修正コードを教えてください。

【エラーメッセージ】
（開発者ツールのConsoleタブに表示されたエラーをそのまま貼り付ける）

【現在のコード（エラーが出ているファイル）】
```
（ファイルの中身を貼り付ける）
```

「実行→エラーをAIに貼る→修正コードをもらう→再試行」のループを2～3回繰り返せば、ほとんどの問題は解決できます。

実務での活用例（Before/After）

毎日5分の作業削減でも、1ヶ月で100分以上の削減になります。「作るのに30分かかった」としても、6日で元が取れる計算です。

うまくいかないときの対処法

「manifest_version: 2」を指定されたとき
2024年以降、Chrome拡張機能はmanifest v2のサポートを終了しています。古い解説記事を参考にしたAIが古い形式でコードを生成することがあります。その場合は「manifest_version: 3で作り直してください」とAIに指示し直してください。

コードを保存したのに拡張機能が動かないとき
`chrome://extensions` の画面で「エラー」というリンクが表示されていないか確認してください。クリックすると詳細なエラーメッセージが表示されます。そのメッセージをAIに渡してください。また、コードを修正したあとは拡張機能一覧の「更新」ボタン（更新マーク）を押して再読み込みが必要です。

「権限が足りない」というエラーが出るとき
Chrome拡張機能は`permissions`という設定で使える機能を宣言する必要があります。エラーメッセージにどの権限が必要か表示されているので、AIに「このエラーを解消するためにmanifest.jsonのpermissionsに何を追加すればいいですか？」と質問すると解決策を教えてもらえます。

Chromeのアップデート後に動かなくなったとき
ChromeのメジャーバージョンアップでAPIの仕様が変わり、既存の拡張機能が動かなくなることがあります。エラーメッセージをAIに貼り付けて「Chrome最新版に対応した修正版を教えてください」と依頼すれば対応できます。

本記事のまとめ

AIを使ったChrome拡張機能の自作は、プログラミング未経験の方でも取り組める現実的な手段になりました。

・AIへのプロンプトでコードを生成し、1フォルダにまとめて保存する
・`chrome://extensions` のデベロッパーモードからフォルダを読み込む
・エラーが出たらメッセージをそのままAIに渡して修正する
・毎日繰り返している手作業の自動化から始めると投資対効果が高い

「プログラミングは専門家の仕事」という前提は崩れつつあります。AIを活用すれば、自分の仕事に最適化した小さなツールを自分で作れる時代です。まずは「この作業、ボタン1つでできたら」という発想から着手してみてください。

（本記事の情報は2026年9月時点のものです。Chrome拡張機能の仕様・AIツールのバージョンは変更される場合があります。）