要約
Agentic Codingを活用したGoogle Chrome拡張機能の開発手法と事例を紹介する記事である。Claude Code、Cursor、Windsurf、Gemini CLIなど主要なAIコーディングツールを使った25の開発事例を調査し、5分〜20分で完成する事例からChrome Web Store公開までの実践的なワークフローを解説する。筆者自身もClaude Codeを使って6つのChrome拡張を開発・公開しており、その経験を踏まえた実践Tipsも共有する。
対象読者: AIを活用した開発に興味があるエンジニア・非エンジニア、Chrome拡張機能の開発を始めたい方、生産性向上ツールを自作したい方
この記事を読むことで得られるメリット
この記事を読むことで以下のことが分かる:
- Agentic CodingとVibe Codingの違いと、Chrome拡張開発との相性の良さ
- 25の実例から見る開発時間の目安と成功パターン
- Claude Code・Cursor・Windsurf・Gemini CLI等のツール比較と選び方
- Chrome拡張開発の実践ワークフローとエラー対処のコツ
- 非エンジニアでもChrome拡張を開発できる具体的な方法
この記事を読むのにかかる時間
約15分
環境
- MacOS Apple M4 Max Sequoia 15.1
- Claude Code（API従量課金 / Max $100〜200/月）
- Google Chrome（デスクトップ版）
AIを使った開発は「当たり前」の時代へ
もはやAIを使った開発を経験することや、それに取り組むことは当たり前になっている。例えば、転職面接やエンジニア同士の会話の中で「最近、AIを使った開発は何かしていますか？」という話題が出たときに、具体的な成果物を見せられるかどうかは大きな差になる。Chrome拡張の自作は、まさにそうした「実績として語れるアウトプット」を最短で手に入れる手段である。
「何を作ればいいかわからない」を解決する題材としてのChrome拡張
AIモデルの進化は目覚ましい。Claude、GPT、Geminiをはじめとする各モデルは数ヶ月単位でアップデートされ、ベンチマークのスコアも着実に向上し続けている。こうした進化を目にして「自分でも試してみたい」「実際どれくらい使えるのか検証したい」と感じている人は多いだろう。
しかし、いざ試そうとすると「何を作ればいいかわからない」「作りたいものが思いつかない」という壁にぶつかる人は少なくない。チャットで質問するだけでは、AIのコーディング能力を本当の意味で体感することはできない。かといって、大規模なWebアプリケーションやモバイルアプリを一から作るのはハードルが高すぎる。
Chrome拡張機能開発は、まさにこの「一歩目」として最適な位置づけにある。理由は明確である。
- 自分の「不便」がそのまま題材になる: 毎日使うブラウザの中で感じる小さな不満——「このページの情報をコピーしやすくしたい」「複数タブの情報を一覧にしたい」——がそのまま開発テーマになる。「作りたいもの」は日常の中にある
- AIの実力を測る適度な複雑さがある: Chrome拡張はシンプルなものから高機能なものまで幅が広く、AIがどこまで対応できるか段階的に試せる。新しいモデルがリリースされるたびに、同じ課題を別のモデルで試して比較することもできる
- 成果物がすぐに使える: 作ったものがそのままブラウザで動くため、ベンチマークの数値では見えない「実用レベルの品質」を自分の目で確かめられる
AIモデルの進化を追いかけるだけでなく、実際に手を動かして検証したいと考えている方にとって、Chrome拡張開発は最も手軽で実りある選択肢の一つである。
なぜChrome拡張開発がAgentic Coding入門に最適なのか
Chrome拡張機能の開発は、Agentic Codingを始めるうえで最適な題材である。多くの著名エンジニアやテック系インフルエンサーがこの点を指摘しており、主な理由は以下のとおりである。
- HTML/CSS/JavaScriptだけで完結する: サーバーサイドの知識やフレームワークが不要
- ローカルPC内で完結: DB・サーバー構築が不要で、セキュリティリスクも低い
- 即座にテスト可能:
chrome://extensions/でワンクリックでロード・リロードできる - AIとの相性が抜群: manifest.jsonの構造が明確で、AIが理解しやすい
- 実用的な成果物: 自分の日常業務を効率化するツールがすぐに手に入る
- Store申請文も用意しやすい: プライバシーポリシーや説明文などの申請に必要なテキストもAIに生成させやすく、公開までのハードルが低い
筆者の実践：6つのChrome拡張を公開
筆者自身、エンジニアとしてClaude Codeを使ったChrome拡張開発を実践しており、すでに6つのChrome拡張を開発・Chrome Web Storeに公開している。数十名のユーザーに利用されており、自分自身の作業効率と生産性を大きく向上させることができた。
拡張名 | 概要 | ユースケース |
|---|---|---|
Webページの公開日・更新日を視覚的に分かりやすくポップアップ表示 | AIが収集した大量の記事をブラウザで確認する際に、情報の鮮度を即座に視覚的に判断できる | |
Markdownファイルのプレビュー。ファイルの変更を即座に反映。目次も表示。マークダウンファイルのコピーできたり、テーマ、フォントファミリーやフォントサイズ、文字間行間等を柔軟に変更できる | ブログやドキュメント執筆時のリアルタイムプレビューなど、Markdownに関することなら何でも活用できる | |
タブのタイトルとURLをMarkdown・HTML・カスタムテンプレート等で一括コピー。タブグループ対応 | AIエージェントに記事を指定する際の複数URL・タイトルの効率的なコピーや、NotebookLM等に複数記事をソースとして与える際に活用 | |
Webページにマーカーと付箋を追加し、Markdownで出力できる注釈ツール | 動画作成時のWebメモ、説明用のハイライト・強調、重要箇所へのマーク付け | |
ブラウザ上で使えるホワイトボード | アイデア整理・図解作成 | |
LINEスタンプ制作過程でのスタンプのプレビュー | - |
Agentic Codingによる開発の最大のメリットは、「こんなツールがあれば便利なのに」というアイデアを短時間で形にできることである。従来であれば数日〜数週間かかっていた開発が、数十分〜数時間で完了する。自分の業務フローにフィットしたカスタムツールを量産できるため、市販のツールにはない細かなニーズに応えられるのが大きな強みである。
25の事例から見る開発の実態
調査した25の開発事例をAIツール別に分類し、特に注目すべき事例を紹介する。
5分〜20分で完成した事例
Agentic Codingの威力を象徴するのが、驚異的なスピードで完成した事例である。
プログラミング知識ゼロの開発者が、Claude Codeに「WebページのURLをQRコードに変換する拡張を作って」と一言指示しただけで、5分で動作するChrome拡張が完成した。
Claude Codeを使い、Twitterプロフィールの直近50件のツイートを読み込んでサイドバーでチャットできる拡張を20分で開発した事例である。
ChatGPT・Gemini・Claudeに1回の入力で同時に質問を送信するChrome拡張を約20分で完成させた。権限エラーやセレクタの誤認識といった問題も、エラーメッセージをフィードバックすることで解決している。
ワンクリックで閲覧中のページのタイトルとURLをDiscordチャンネルへWebhook通知する拡張を「数分」で開発した事例である。Chrome拡張とBot開発の入門として推奨されている。
非エンジニアが開発した事例
プログラミング経験のない人でもChrome拡張を開発できることは、AIコーディングの大きな魅力である。なお、以下の事例はAgentic Codingというよりも Vibe Coding——具体的な実装や設計の指示を出さず、雰囲気レベルの指示だけでAIにコードを生成させるアプローチ——に該当する。
Data Attribute Hover Checker（コード0行）
Webページの要素にホバーすると、そのHTML要素に付与されているデータ属性を表示するChrome拡張である。Claude Sonnet 3.7を使い、コードを一切書かずに対話とエラーフィードバックだけで開発し、Chrome Web Storeに公開した。開発者自身が「コードを一行も書いていない」と明言している。
Windsurfを使い、30〜45分でスクリーンショット＆ピン留めツールを完成させた事例である。プロンプトの書き方と試行錯誤の過程が詳細に記録されている。
非エンジニアがClaude Codeで約20分でWEBの記事からX投稿を生成するChrome拡張を作成した事例がPodcastで紹介されている。
開発未経験者がCursorを使い、開いているタブの情報をMarkdownとして保存するChrome拡張を開発した事例である。
大規模・実用的な拡張の事例
通常90日で消えるChromeの閲覧履歴をブックマークで永続保存し、日本語全文検索も搭載した実用的な拡張である。3つの積みプロジェクトを含め1週間で完成させ、Chrome Web Storeに公開済みである。
キーボード操作、AI自動カテゴリ分類、ドラッグ＆ソート対応の高機能ブックマーク管理ツールである。プログラミング初心者がClaude AIを使ってゼロから完成させた。
Google Cloud主催のVibe Codingハッカソンで優勝したChrome拡張である。サイトブロック機能とテトリスを組み合わせたユニークな発想が評価された。「手書きコーディング禁止」というルール下で、Gemini CLIが全構成を設計・実装した。
その他の注目事例
事例 | ツール | 所要時間 | 概要 |
|---|---|---|---|
Claude | 不明 | ChatGPT/Claudeの対話をZennに直接公開 | |
Claude Code | 10分 | 選択テキストからフローチャート・マインドマップ自動生成 | |
Windsurf | 25分 | ローカルファイルをOracle Cloud Storageバケットにアップロード。15文のプロンプトだけで完成 | |
Windsurf | 30分〜1週間 | MVPは30分、ストア公開まで1週間 | |
Gemini CLI | 不明 | Webの記事を要約する拡張。ディレクトリ名から意図を汲み取り自発的にプラン提案 | |
不明 | 不明 | 求職フォーム自動入力で毎週数時間を節約 | |
不明 | 不明 | テキスト選択→検索、ユーザー独自の用語追加 | |
複数 | 約5時間 | 「半Vibe Coding」でエンジニアが一部手書き |
Chrome拡張開発の実践ワークフロー
- つくりたいものの概要を自然言語で伝える: 「現在閲覧中のWebページのURLをQRコードに変換するChrome拡張を作って」のように、目的を具体的に書く
- セキュリティチェックを依頼する: 特に非エンジニアがAIコーディングで開発する場合、セキュリティ面の考慮が抜けがちである。「セキュリティチェックもしてください」と一言添えておくだけで、AIが権限の過剰付与や危険なAPI使用などを指摘してくれる
- GitHubで管理する: コードはGitHubリポジトリで管理することを推奨する。バージョン管理ができるだけでなく、AIに「GitHubにプッシュして」と指示するだけでリモートリポジトリへの反映が完了する。変更履歴が残るため、問題が起きたときのロールバックも容易である。さらに、自分で触っていて気づいたことや、ユーザーからのバグ報告、改善に関するアイデアがあれば、それらをIssueとして登録しておけば後から見返せるので、そういう面でもメリットがある。
- エージェントスキルで量産体制を作る: Chrome拡張を繰り返し開発するなら、一連の開発フローを「エージェントスキル」として定義しておくことをおすすめする。具体的には、以下の内容をスキルとしてまとめておく。
- 仕様検討の流れ: どういう手順で、どういう機能を作るかの検討プロセス（要件整理→API選定→ファイル構成設計→実装）
- ストア申請の一式作成: スクリーンショットやアイコンの生成、機能説明文・プライバシーポリシーの作成など、Chrome Web Store申請に必要な成果物の生成
このスキルを用意しておけば、新しいアイデアを思いついた段階でスキルを実行するだけで、開発からストア公開までの一連の作業を一気に進められる。Chrome拡張の量産体制が整い、「思いついたらすぐ形にする」サイクルが回るようになる。また、スキルとして手順を定義しておくことで、毎回同じ品質・同じ手順で開発が進むため、再現性が高まる。プロンプトの書き方や指示の出し方に左右されず、安定したアウトプットを得られるのも大きなメリットである。
まとめ
Agentic Codingを活用したChrome拡張開発は、エンジニアから非エンジニアまで幅広い層にとって、生産性向上の新たなアプローチとなっている。本記事で紹介した25の事例から、以下のポイントが見えてきた。
- Chrome拡張はAgentic Coding入門に最適である: HTML/CSS/JSだけで完結し、DB・サーバーが不要で、即座にテストできる
- 開発時間は劇的に短縮される: シンプルな拡張なら5〜20分、中程度でも20〜60分で動作するプロトタイプが完成する
- 非エンジニアでも開発可能である: コードを一行も書かずにChrome Web Storeに公開した事例が複数存在する
- ツールの選択肢は豊富である: Claude Code、Cursor、Windsurf、Gemini CLI等、用途と予算に応じて選べる
- 「自分の生産性を上げるツールを自分で作る」時代が到来している: 市販ツールでは満たせない細かなニーズに、自作拡張で対応できる
筆者自身も6つのChrome拡張を開発・公開し、日常業務の効率化を実現している。まずは「自分が毎日使いたいツール」を一つ作ることから始めてみてはいかがだろうか。AIが書いたコードを受け入れ、試行錯誤を繰り返す中で、Agentic Codingの可能性を実感できるはずである。
