会話だけでChrome拡張が完成！Claude Codeで作ってみた【実践ガイド付き】

こんにちは、AGIラボ運営のあやみです。

最近、AI Studioなどのバイブコーディングツールでウェブアプリを作れるようになりましたが、作ったアプリをずっと使い続けるケースは少なく、意外とアクセスしなくなってしまうことが多かったんです。

理由は簡単。

私の仕事のほとんどはブラウザ上で行われているから。Notionでアイデアをまとめ、Xで情報収集し、YouTubeで学習する。すべてブラウザの中です。
そこで気づきました。「ちょっとしたアプリなら、Chrome拡張にしちゃった方が便利なのでは？」

この記事では、プログラミング初心者の私が、Claude Codeを使って実際にChrome拡張を作った体験と、その具体的な手順を詳しく解説します。
Claude Codeの具体的な使い方のステップは記事の後半にて紹介しています！

【体験談】実際にChrome拡張を作ってみた

作ってみた① Notion図解化Chrome拡張

Notionでアイデアをまとめる時、「テキストだけじゃわかりにくい。AIが自動で図解してくれたら最高」

Geminiで都度生成するのもいいけど、面倒だな。。それならChrome拡張にしちゃえばいいじゃん！と思い作成してみました。

作成したもの

https://x.com/ayami_marketing/status/2008486953738539243?s=20

最初の指示

Claude Codeに伝えたのは：

Notion上で使えるChrome拡張機能を作成してください。
Notion上でテキストを選択して拡張を起動すると、
そのテキストの内容を図解化した画像が生成されて、
その画像をNotion上にそのまま追加できる機能です。
画像生成はGeminiのNano Banana ProをAPIを使って行います。

Claude Codeは即座に設計を提案して、プロジェクトのファイルを作成してくれました。

失敗の連続とデバッグ

しかし、ここからが試練でした。

失敗① 間違ったAPI

最初のテストで「APIキーが無効」エラー。でもキーは有効なはず。
Claude Codeに報告します。

Imagen3のAPIを使用していたので、Nano Banana Proに合わせたコードに修正してもらいました。

失敗② 通信エラー

画像生成には成功したと表示されるのですが、画像が出てこない問題が発生しました。その問題を伝えます。

画像生成に時間がかかる間に、Content Scriptとの接続が切れていることが原因だったので、フォールバックの追加がされました。

フォールバック方式

Claude Codeが提案したのは、3段階のフォールバック戦略でした。

この提案を実装してもらい、無事に完成しました！

最終テスト

Notion上でテキストを選択し、右クリック→「テキストから図解を生成」。10秒ほど待つと図解画像が表示されました！

開発時間、合計約1時間。
失敗と試行錯誤を経て、Notion上で画像を生成できる拡張が完成しました。