バイブコーディングでchrome Extentionを作成してみた：ClaudeCodeとPlaywright MCPで実現する自律型開発

Posted at 2026-05-10

はじめに

確定申告の時期だけでなく、日々の業務における経費精算は、多くのエンジニアやビジネスマンにとって負担の大きい作業です。Amazon、楽天市場、Yahoo!ショッピングといった主要ECサイトは、それぞれUIが異なり、領収書PDFをダウンロードするまでの導線が統一されていません。

この問題を解決するため、対象サイトで領収書発行リンクを自動的にハイライトし、ダウンロード後のファイル整理までを補助するChrome拡張機能 「ECサイト領収書ナビゲーター」 を開発しました。

本記事では、この開発プロセスにおいて ClaudeCode による爆速の実装と、Gemini CLI による高度な自律検証（Playwright MCP + Vision）をいかに使い分け、効率的に完遂させたかの記録を共有します。

どなたかの参考になれば幸いです。

1. 使用した技術の概要と「使い分け」の理由

今回の開発では、1つのAIにすべてを任せるのではなく、各モデルの強みを活かした「適材適所」のツールチェーンを構築しました。

ClaudeCode（実装担当）

Anthropic社によるコマンドラインAIエージェントです。高いコーディング能力を活かし、Markdownの仕様書からTypeScript/Viteによるプロジェクト構成と、SPA対応のロジックを一気に書き上げました。

Gemini CLI（検証担当：レビュアー）

GoogleのGeminiモデルをベースとしたエージェントです。今回のプロジェクトでは、Playwright MCP を介したブラウザ操作と、その画面を読み取る Vision（画像認識）能力 を活かした「レビュアー」の役割を担いました。

なぜ使い分けるのか？
Playwright MCPを用いた実機検証や画像認識は、非常に多くのコンテキスト（トークン）を消費します。コーディングを得意とするClaudeCodeですべてを完結させようとすると、使用量制限（トークンコスト）が大きな壁となります。そこで、Vision機能に定評があり、コンテキスト効率に優れた Gemini CLI に検証を任せることで、経済的かつ確実に品質を担保するフローを実現しました。

2. 開発プロセス：ドキュメント駆動と適材適所の連携

実装フェーズ（ClaudeCode）

最初に私がMarkdownで定義した MVP_SPEC.md などの仕様書を読み込ませました。ClaudeCodeは、MCPなどの重い外部ツールを使わず、純粋なコーディング能力で以下の機能を短時間で実装しました。

MutationObserver: 楽天・Yahoo等のSPAサイトへの動的対応。
3段フィルタリング: キーワード、タグ、テキスト長（30文字以内）によるノイズ除去。

検証フェーズ（Gemini CLI）

実装が終わると、Gemini CLI の出番です。Gemini CLI は Playwright MCP を通じて「目」と「手」を手に入れ、自律的に以下の動作確認を行いました。

ブラウザの自動操作: 実際にAmazonなどの注文履歴ページへアクセス。
Visionによる視認性チェック: 実画面のスクリーンショットを解析し、「オレンジ色のハイライトがユーザーにとって十分目立っているか」「ガイドバーがUIを邪魔していないか」を人間のような視点でレビュー。
フィードバックの生成: 検証結果に基づき、改善点を私（ユーザー）へ報告。修正が必要な場合は、再び ClaudeCode へ指示を出すというエコシステムを構築しました。

3. 実装における技術的な工夫（詳細）

MutationObserverによるデバウンス処理

AIが生成したコードには、DOMの変化を監視しつつも、頻繁な発火を防ぐ 400msのデバウンス処理 が組み込まれていました。これにより、スクロール時のパフォーマンスを維持したまま、動的に読み込まれる注文要素を確実に捉えることができます。

高精度なキーワードマッチング

ノイズを防ぐため、receiptKeywords.ts という定義ファイルを作成し、厳選されたキーワードのみを対象にしました。ここでも Gemini CLI の Vision 検証により、「注文履歴」という広すぎる言葉がノイズになっていることを発見し、ロジックを微調整するプロセスが発生しました。