AIでChrome拡張機能を作る——自分専用ツールを作って業務を効率化する完全ガイド【プロンプト＆コード付き】

「こんな機能があったらいいのに」を、自分で作れるようになった話

正直に言います。

Chrome拡張機能って、プロのエンジニアが作るものだと思っていた。

毎日ブラウザを使っていて「この作業、ワンクリックでできたらな」と思うことは山ほどあった。

でも「拡張機能を自作する」なんて、遠い世界の話だと。

去年、Claude Codeに話しかけた。

「開いているページのURLとタイトルをコピーするChrome拡張を作りたい」

30分後、ブラウザのツールバーに自分で作ったボタンが並んでいた。

クリックすると、ページ情報がコピーされる。

「……自分で作った拡張機能が、動いてる」

沖縄でスマホ修理「スマホ119」を8店舗経営しながら、毎日パソコン作業もしている僕にとって、これは革命だった。

今日は、その作り方を全部公開します。プロンプトと動くコードを全部載せます。

**この記事で得られること：**
✅ Claude Code専用プロンプト30本——貼るだけで拡張機能のコードが出る
✅ 実用的なChrome拡張の完全ソースコード7種——コピペで動く
✅ 拡張機能の基本構造（manifest.json）を図解で解説
✅ Chrome Web Storeへの公開手順（申請〜審査）
✅ 業務効率化の実例——僕が実際に作って使っている拡張機能

第1章：Chrome拡張機能の仕組み

Chrome拡張機能は、驚くほどシンプルな構造です。

拡張機能の基本ファイル
├── manifest.json    # 設定ファイル（必須）
├── popup.html       # ボタンを押したら出る画面
├── popup.js         # 画面の動作
├── content.js       # ページ内で動くスクリプト
├── background.js    # 裏で動くスクリプト
└── icons/           # アイコン画像
```

一番重要なのが `manifest.json`。これが拡張機能の設計図です。

HTMLとJavaScriptが書ければ作れます。というより、書けなくてもAIが書いてくれます。

第2章：最初のプロンプト——一番シンプルな拡張機能

以下をClaude Codeに貼ってください。

Chrome拡張機能を作ってください（Manifest V3）。

機能：
- ツールバーのアイコンをクリックするとポップアップが開く
- ポップアップに「現在のページのタイトルとURLをコピー」ボタン
- クリックするとクリップボードに「タイトル\nURL」の形式でコピー
- コピー完了したら「コピーしました！」と表示

必要なファイル：
- manifest.json
- popup.html
- popup.js

全ファイルの完全なコードを出力してください。
各ファイルをどのフォルダに置くかも教えてください。
```

実際に出てきたコード：

**manifest.json**
```json
{
  "manifest_version": 3,
  "name": "ページ情報コピー",
  "version": "1.0",
  "description": "現在のページのタイトルとURLをコピーします",
  "permissions": ["activeTab", "clipboardWrite"],
  "action": {
    "default_popup": "popup.html",
    "default_title": "ページ情報をコピー"
  }
}
```

この先で読めること

ここまでは「Chrome拡張機能の仕組みと、最初の1本を作るプロンプト、そこで出てきたmanifest.json」でした。ここから先は、それを実際に動かすコードと、僕が仕事で使っている拡張機能の作り方です。

• 最初の拡張機能のpopup.htmlとpopup.jsの完全なコードと、開発者モードでの入れ方

• 実用拡張7種のプロンプトとコード（選択テキストの翻訳・要約、広告の非表示、スクリーンショット、タブの一括管理など）

• 業務効率化編のプロンプト（フォームの自動入力、ページ内検索の強化版、定型文のワンクリック挿入）

• Chrome Web Storeへの公開手順と、審査を通すコツ

• manifest.jsonのリファレンスと、AIにデバッグを頼むプロンプト

自分で作るのが大変なツールは、僕の会社でも作っています。

NextCode（システム開発）

僕がAIでいろいろ作っている毎日は、ショート漫画にしてYouTubeにも出しています。

YouTubeのショート漫画「NextCode: ゼロからの再起動！沖縄スマホ修理屋の天才プログラマー」

ボタンを押すとページ情報がコピーされる、あの最初の1本の残りのコードから、毎日使っている7種類まで、この先に動くコードをそのまま載せています。