Chrome拡張機能は「プログラマーが作るもの」だと思っていた
Chrome拡張機能を自作する——と聞いて、どんな印象を持つでしょうか。
「プログラミングができる人じゃないと無理でしょ」
「JavaScriptとか書けないし」
「そもそも何から始めればいいかわからない」。
自分も最初はそう思っていました。でも結論から言うと、生成AIを使えばプログラミング未経験でもChrome拡張機能は作れます。
自分はGeminiとGensparkを主に使って、6つの機能を搭載した「Blog Master Ultimate」というブログ運営支援ツールを実際に作りました。
この記事では、Chrome拡張機能の基本的な仕組みと作り方、そして生成AIをどう活用すれば非エンジニアでも拡張機能を開発できるのかを、自分の実体験をもとに書いていきます。
そもそもChrome拡張機能とは何か
Chrome拡張機能は、Google Chromeブラウザに機能を追加する小さなプログラムです。
Chromeウェブストアからインストールして使うものが一般的ですが、自分で作ったものをローカル環境で読み込んで使うこともできます。
技術的に言うと、Chrome拡張機能の正体はHTML・CSS・JavaScriptの組み合わせです。(言っていることがわからなくてもAIの指示に従うだけなので大丈夫！）
Webサイトを作るのと同じ技術で動いています。つまり、特別なプログラミング言語を新しく覚える必要はありません。
現在のChrome拡張機能は「Manifest V3」という仕様に基づいて作ります。
以前は「Manifest V2」が使われていましたが、2025年以降はV3が標準となり、V2の拡張機能は順次無効化されています。これからChrome拡張機能を作るなら、最初からManifest V3で作るのが正解です。
Chrome拡張機能を構成する3つの要素
Chrome拡張機能は、最低限以下の要素で構成されています。
manifest.json
拡張機能の設計図にあたるファイルです。名前、バージョン、使用する権限、読み込むスクリプトなどをJSON形式で記述します。どんな拡張機能にも必ずこのファイルが必要です。
ポップアップ（popup）
ブラウザの右上にある拡張機能アイコンをクリックしたときに表示される小さなウィンドウです。HTMLファイルで作ります。ユーザーが最初に触れるインターフェースなので、ここの使い勝手が拡張機能全体の印象を左右します。
バックグラウンドスクリプト（background.js）
裏側で常に動いている処理です。Manifest V3ではService Workerとして動作します。タブの情報を取得したり、スクリーンショットを撮影したり、ページにスクリプトを注入したりといった「ブラウザの機能に直接触る処理」はここに書きます。
これに加えて、開いているWebページの中で動作する「コンテンツスクリプト（content script）」や、サイドパネルに表示するHTML、設定を保存するためのストレージAPIなど、必要に応じて構成要素を追加していきます。
実際に自分が作った拡張機能の話
自分が作った「Blog Master Ultimate」は、ブログ運営に必要な6つの機能を1つのChrome拡張機能に統合したものです。
搭載している機能は、
- Google検索上位10サイトの見出しを自動抽出してAI向けプロンプトを生成する「見出し抽出・記事構成」
- 競合ページのSEO要素を8項目で100点満点スコアリングする「SEO競合分析」
- アフィリエイトリンクや定型文をワンクリックでエディタに挿入できる「定型文・リンク管理」
- 記事制作の工程を管理する「タスク管理」
- Gemini Gemをグループ分けして管理する「Gem Manager」
- ブラウザ上で範囲選択キャプチャから画像編集まで完結する「画面キャプチャ」
の6つです。
現時点でバージョン8.6。ファイル数は20を超えています。非エンジニアの自分がここまで作れたのは、間違いなく生成AIのおかげです。
生成AIでChrome拡張機能を作る具体的な手順
ここからは、自分が実際にやった開発の流れを説明します。
手順1：作りたい機能を日本語で整理する
最初にやるのは、コードを書くことではありません。
「何を作りたいのか」を日本語でできるだけ具体的に書き出すことです。
たとえば見出し抽出機能なら、こんな感じです。
「Google検索結果のページで実行すると、検索結果に表示されている上位10サイトのURLを取得して、それぞれのページにアクセスしてH1〜H4の見出しを抽出する。抽出した見出しの出現頻度を集計して、頻出する見出しをランキング表示する。最終的に、AIに渡すためのプロンプトを自動生成してクリップボードにコピーする」
ここが曖昧だと、AIに聞いても曖昧な回答しか返ってきません。
「こういう入力をしたら、こういう出力がほしい」というレベルまで具体化することが重要です。
手順2：生成AIにコードを書いてもらう
自分が主に使っているのはGeminiとGensparkです。
Geminiは対話しながらコードを生成・修正していくのに向いています。
「この機能を作りたい」と伝えると、manifest.json、HTML、CSS、JavaScriptの一式を生成してくれます。
エラーが出たらエラーメッセージをそのまま貼り付けて「これを修正して」と伝えれば、修正版を出してくれる。
この対話型の開発が、非エンジニアにとっては一番やりやすいスタイルです。
Gensparkは、複数の情報源を横断的に調べてまとめてくれるのが強みです。
「Chrome拡張機能でサイドパネルを開く方法」「Manifest V3でスクリーンショットを撮影する方法」といった技術的な疑問を調べるときに使っています。
公式ドキュメントとStack Overflowと個人ブログの情報をまとめて整理してくれるので、自分で検索して読み比べる手間が省けます。
使い分けとしては、「コードを書いてもらうときはGemini」「技術的な調査をするときはGenspark」という感じです。
手順3：ファイルを作成してフォルダにまとめる
AIが生成したコードをテキストエディタ（メモ帳でもVSCodeでも何でもいい）に貼り付けて、指定されたファイル名で保存します。
Chrome拡張機能の基本的なフォルダ構成はこうなります。
- 拡張機能のルートフォルダの中に、manifest.jsonを置く。
- 同じ階層にpopup.htmlとpopup.js、background.jsを置く。
- 機能ごとにサブフォルダを作って、それぞれのHTMLやJSファイルを整理する。
- アイコン画像もルートフォルダに置く。
Blog Master Ultimateの場合は、features フォルダの中に analysis、gemini、screenshot、sidepanel、workflow といったサブフォルダを作って、機能ごとにファイルを分けています。
何言ってるかわからないという人は、深く考えないで良いです。自分も初めはよくわからなかったです。
すべてAIに任せるだけなので、言われたことをコピペしてメモ帳とフォルダに登録するだけなので、迷うことはありません。
手順4：Chromeに読み込んで動作確認する
ここが一番簡単な部分です。
Chromeのアドレスバーに「chrome://extensions/」と入力して拡張機能の管理ページを開く。
右上の「デベロッパーモード」をオンにする。
「パッケージ化されていない拡張機能を読み込む」ボタンをクリックして、先ほど作ったフォルダを選択する。
これだけで拡張機能がChromeに読み込まれます。
手順5：エラーを修正する（ここが一番時間がかかる）
正直に言うと、AIが一発で完璧に動くコードを生成してくれることはほぼありません。
読み込んだ瞬間にエラーが出たり、ボタンを押しても何も起きなかったり、意図と違う動きをしたりします。
でもここでも生成AIが活躍します。
Chromeの開発者ツール（F12キーで開く）のConsoleタブに表示されるエラーメッセージをコピーして、そのままGeminiに貼り付ける。「このエラーが出ています。修正してください」と伝えれば、修正版のコードが返ってきます。
この「動かす→エラーを見る→AIに聞く→修正する→また動かす」のサイクルを繰り返していくのが、生成AIを使った拡張機能開発の実態です。
華やかな作業ではありませんが、プログラミングの知識がなくても「エラーメッセージはコピペしてAIに聞く」ことが一番大事です。
開発中にぶつかった壁と乗り越え方
自分が実際に開発していて苦労したポイントをいくつか書いておきます。
これからChrome拡張機能を作ろうとしている人の参考になれば。
Manifest V3の制約
Manifest V2の時代に比べて、V3ではできることに制約があります。たとえばバックグラウンドスクリプトがService Workerに変わったことで、永続的な処理ができなくなりました。
AIが古い情報をもとにV2のコードを生成してしまうことがあるので、「Manifest V3で」と明示的に指定することが大事です。
サイドパネルの扱い
Blog Master Ultimateではサイドパネルを多用していますが、サイドパネルAPIは比較的新しい機能で、ネット上に情報が少ない。AIも正確なコードを一発で出してくれないことが多かったです。
Chromeの公式ドキュメントを読みながら、AIと相談しつつ試行錯誤しました。
コンテンツスクリプトの権限問題
拡張機能からWebページの内容を取得するにはコンテンツスクリプトを使いますが、chrome://やChromeウェブストアのページなど、アクセスが禁止されているページがあります。
この制限に引っかかってエラーが出ることが何度もありました。
ストレージの容量
chrome.storage.localには容量制限があります。タスク管理やリンク管理で大量のデータを保存しようとすると、この制限に引っかかることがある。
データ構造を工夫して、なるべくコンパクトに保存する必要がありました。
非エンジニアが拡張機能を作るコツ
実際に作ってみてわかったコツを整理しておきます。
最初は1機能だけ作る
いきなり全部入りを目指すと確実に挫折します。自分も最初は見出し抽出機能だけを作って、動くことを確認してから次の機能に取りかかりました。1つの機能が動く成功体験があると、モチベーションが続きます。
AIへの指示は具体的に
「Chrome拡張機能を作って」では何も出てきません。
「Manifest V3のChrome拡張機能で、現在開いているページのH2見出しをすべて取得してポップアップに一覧表示するコードを書いて。manifest.json、popup.html、popup.jsの3ファイル構成で」くらい具体的に伝える必要があります。
それも最初は難しいと思うので、「こんな機能をchromeの拡張機能で作りたいけど作れるかな？」と聞いてみるのが良いでしょう。
作れるなら案を出してもらい、コードを書き出してもらいましょう。そこからが始まりです。
エラーメッセージは全文コピペする
エラーの内容を自分で要約してAIに伝えると、誤解が生まれやすい。
Consoleに表示されたエラーメッセージをそのままコピーして渡すのが最も確実です。
公式ドキュメントを完全に無視しない
AIの回答が常に正しいとは限りません。
特にManifest V3の仕様については、Chrome公式の開発者向けドキュメント（developer.chrome.com）を確認する癖をつけておくと、無駄な試行錯誤を減らせます。
バージョン管理をする
機能を追加するたびに、動いている状態のフォルダを丸ごとコピーして番号を振っておく。
「v1_見出し抽出だけ」「v2_SEO分析追加」のようにしておけば、何か壊れたときに戻れます。
Gitが使えるならGitでもいいですが、フォルダコピーでも十分です。
定期的にバックアップを取りましょう（1つ機能が出来たらバックアップを取る癖をつけておくとエラーやAIがおかしくなってグチャグチャになった時にやり直しが少しで済みます。
自分は最初作っていた時に、半分ほど一気に作ったらおかしくなりPCをぶん投げたくなりました・・・気を付けましょう。
生成AIを使った開発は「プログラミング」なのか
これは正直、微妙なところだと思います。
自分はコードの中身をほとんど理解しているわけではありません。
AIが生成したコードの大まかな構造は把握していますが、1行1行何をやっているかを説明しろと言われたら何もわかりません・・・
でも「こういう機能がほしい」という設計ができて、「AIに適切な指示を出す」ことができて、「エラーを見て修正のサイクルを回す」ことができれば、動くものは作れる。
これが2026年以降の現実です。
プログラミングの定義にこだわるよりも、「自分が欲しいツールを自分で作れるようになった」という事実のほうが大事だと個人的には思っています。
Blog Master Ultimateについて
最後に少しだけ宣伝させてください。
この記事で触れた「Blog Master Ultimate」は、近日中に販売を開始する予定です。
ブログ運営に必要な6つの機能
- 見出し抽出・見出し構成作成
- SEO競合分析
- 定型文・リンク管理
- タスク管理
- Gem Manager
- 画面キャプチャ
を1つのChrome拡張機能に統合したツールです。
詳細はnoteで紹介記事を書いています。
興味がある方はそちらもご覧ください。
まとめ
Chrome拡張機能の開発は、生成AIの登場によって非エンジニアにも手が届くものになりました。
必要なのはプログラミングスキルではなく、「何を作りたいかを具体的に言語化する力」と「エラーに根気よく向き合う姿勢」です。
まずは小さな機能1つから始めてみてください。
ボタンを押したら今日の日付を表示するだけの拡張機能でもいい。
それが動いた瞬間の「おお、動いた」という感覚が、次の開発のモチベーションになります。