【初心者向け】バイブコーディングでChrome拡張を作る最短ルート

バイブコーディングでChrome拡張ってどう作るの？

今回は、バイブコーディングを試してみたいけれど、どんなお題から始めればよいか分からない方に向けて、Chrome拡張の最短の作り方を紹介したいと思います。

専門用語はできるだけ噛み砕いて、初心者の方が今日中に1つ動かせるところまで進めるよう構成したので、未経験の方も独学で挫折経験がある方も、ぜひ最後までご覧ください。

なぜ初心者の練習にChrome拡張が向いているのか

まず、なぜバイブコーディング初心者の最初の題材としてChrome拡張がよく薦められるのかを整理します。Chrome拡張はファイル数が少なく、Chromeに読み込ませるだけで実行できるため、Webアプリのようにサーバを立てる必要がありません。

さらに自分のブラウザ上で動かせるので、自分専用の小さな道具を作るのに向いています。「毎日見ているサイトをちょっと便利にする」レベルから始められるのも初心者にとって大きなメリットです。

Chrome拡張の最小構成を知っておく

AIにコードを書かせる前に、Chrome拡張の中身がどんなファイルでできているかをざっくり把握しておくと、出てきたコードを動かす段階で迷いません。最低限は次の3つだけ覚えれば十分です。

最低限必須なのは拡張フォルダの直下に置くmanifest.jsonだけで、popupやcontent scriptは作りたい機能に応じて足していく形になります。最新のChromeでは「ManifestV3」と呼ばれる仕様が前提です。細かい中身はAIに書かせれば良いので、今は名前だけ覚えておけば大丈夫です。

フォルダの中はこんな感じ

初心者が最初に作る拡張は、ファイル数が4つもあれば十分です。たとえばこんな構成になります。

my-extension/
  ├── manifest.json
  ├── popup.html
  ├── popup.js
  └── icon.png

あとはこのフォルダを丸ごとChromeに読み込ませると、自分専用の拡張として動き始めます。フォルダ1つで完結するのがChrome拡張の気軽さです。

バイブコーディングでChrome拡張を作る5ステップ

ここから本題の作り方です。AIに丸投げするとはいえ、進める順番だけは決めておくと迷いません。次の5ステップで進めます。

ステップ1: お題を1行で書く

最初に、AIに依頼する「お題」を1行で言語化します。「誰のために、どのページで、何ができる拡張か」を短く書くのがコツです。たとえば「YouTubeの再生中に、現在の再生位置をワンクリックでメモとしてコピーできる拡張」のように具体化しておくと、出てくるコードのブレが小さくなります。

ステップ2: AIに丸投げして初期コードを作らせる

1行のお題をそのままAIに貼り付け、「Chrome拡張をManifestV3で動くように、フォルダ構成とすべてのファイル内容を出して」と頼みます。フォルダ構成も含めて出してもらうのがポイントで、これを忘れるとファイルがバラバラに返ってきて組み立てに迷います。

ステップ3: Chromeに読み込ませる

AIが出したファイルをローカルのフォルダに保存したら、Chromeに読み込ませます。chrome://extensionsを開き、デベロッパーモードをオンにしてから「パッケージ化されていない拡張機能を読み込む」で先ほどのフォルダを選ぶ流れです。エラーが出たら、エラーメッセージをまるごとAIに渡して原因を聞きましょう。

ステップ4: 動かして「不満」を伝える

無事に読み込めると、拡張機能メニューの中にアイコンが追加されます。よく使う拡張ならピン留めしてツールバーに出すと便利です。実際に使ってみて、「ボタンの色が地味」「コピーした内容が分かりにくい」など、小さな不満をそのまま日本語でAIに投げます。完成形を頭の中で固めず、触りながら直すのがバイブコーディングのリズムです。

ステップ5: 少しずつ機能を足す

基本機能が安定したら、「ショートカットキーを足したい」「履歴を10件保存したい」のように、機能を1つずつ追加していきます。1回の依頼で1機能だけが鉄則で、まとめて頼むと既存の動作が壊れることがあります。

初心者におすすめのお題3つ

「題材を自由に決めて」と言われると逆に手が止まる方も多いので、初心者にちょうどよいお題を3つ挙げておきます。どれも30分〜1時間ほどで形にできるレベルです。

1つ目はpopup中心で作れる軽いお題、2つ目と3つ目はcontent scriptや権限設定にも触れる少し実践寄りの題材になっています。慣れの度合いに合わせて選びましょう。

使うAIツールはどれがいいか

Chrome拡張のバイブコーディングは、ブラウザでチャットするだけでも十分に進められます。ただ、ファイル数が増えてくるとエディタ統合型のほうがラクです。代表的な選択肢を整理しておきます。

最初の1本はブラウザのChatGPTかClaudeで十分です。慣れてきて、複数の拡張を並行で育てたくなったらCursorを試す、というステップで自然に上達していきます。

初心者がつまずきやすい3つのポイント

最後に、実際にバイブコーディングでChrome拡張を作った初心者がよく詰まる箇所と、AIへの聞き方をまとめます。先に知っておくと、無駄なリトライが大幅に減ります。

対策1: 権限はエラー文をそのままAIに渡す

エラーは拡張機能ページの「エラー」欄、popupの検証画面、対象ページのDevToolsなどに分かれて出ます。読めなくても問題なく、エラー文をそのままコピーしてAIに「これを直して」と渡せば、manifest.jsonに足すべき権限を教えてくれるのがバイブコーディングの強みです。

対策2: 「ManifestV3前提で」と最初に書く

AIは古い情報も混ぜて答えがちなので、初期プロンプトの段階で「ManifestV3前提、backgroundはservice_workerに1ファイル指定、保存はchrome.storageを使って」と明示しておくと、後から書き直しになる確率がぐっと下がります。

対策3: 拡張の再読み込みを習慣化する

manifestやservice worker、content scriptを書き換えたら、chrome://extensionsで拡張の更新ボタンを押す必要があります。content scriptを変えた場合は、対象ページ側も再読み込みしてください。「拡張を更新→対象ページを再読み込み→動作確認」をワンセットにしておくと、テストのリズムが崩れません。

まとめ

今回は、バイブコーディング初心者の方に向けて、Chrome拡張の作り方を最短ルートで紹介してきました。

Chrome拡張はファイル数が少なく、AIに丸投げしても1〜2時間で動くものが手に入る、入門に最適な題材です。「自分専用に、毎日見ているページをちょっと便利にする」というテーマから始めれば、初心者でも無理なく完成体験までたどり着けます。

大切なのは、最初から完璧を狙わず、触って気づいた違和感を次の指示に変えていくことです。1つできれば次のアイデアが自然と湧いてくるので、まずは小さな1本を完成させてみましょう。

＼電子工作歴9年の私のイチ押し！ELEGOOの電子工作キット／

ELEGOO Arduino用UNO R3スターターキット レベルアップ チュートリアル付 mega2560 r3 nanoと互換 [並行輸入品]

created by Rinker

ELEGOO

• Amazon
• 楽天市場
• Yahooショッピング