「Chromeの拡張機能って、自分で作れるんです。」

そう聞いて、ピンとくる人は少ないかもしれません。多くの人にとって拡張機能は「探して、ダウンロードして、入れるもの」であって、「作るもの」ではないはずです。

実際、プログラミングの経験がなければ、コードを書くこと自体が高いハードルに感じられます。ファイルの保存1つとっても、何が正解か分からず、途中で挫折してしまう人も少なくありません。

ところが今は、AIに「何を」「どうしたいか」を伝えるだけで、必要なファイルをすべて用意してくれる時代になりました。つまずきやすいポイントさえ押さえておけば、今日中に自分専用の拡張機能を1つ完成させることができます。

拡張機能の中身は、シンプルな数枚のファイルだけです

Chrome拡張機能は、Chromeに新しい機能を追加する小さなプログラムです。中身は、HTMLやJavaScriptといった複数のシンプルなファイルで構成されています。

以前はこの中身を自分で書くにはプログラミングの知識が必要でしたが、生成AIが登場したことで、この「中身」を自分で作るハードルが大きく下がりました。

この記事では、次の4ステップで進めていきます。

1. AIに欲しい機能を伝える
2. 作られたファイルをフォルダへ保存する
3. Chromeに拡張機能として読み込む
4. 実際に使ってAIと一緒に修正する

一発で完成させる必要はありません。使いながら少しずつ育てていくのがコツです。この手順の通りに進めれば、今日中に自分専用のWikipedia拡張機能が完成します。

作る前に全体の流れさえ分かれば、あとは難しくありませんよ。

総務のナギくん

Wikipediaを読みやすくする拡張機能も、やることはたった4つ

Chromeの拡張機能と聞くと複雑な機能を想像するかもしれませんが、やっていることは意外とシンプルです。

• 消す：邪魔な表示やメニューを非表示にする
• 変える：デザインやボタンの動きを変更する
• 足す：独自のボタンや機能を追加する
• 自動化する：コピーや入力などの作業を自動でおこなう

特別な機能を狙うのではなく、この4つの組み合わせでできていると知っておくだけで、拡張機能作りのハードルはぐっと下がります。

難しく考えず、この4つのどれかだと思えば大丈夫ですよ。

総務のナギくん

作る前に、保存場所を1つだけ決めておく

拡張機能はプログラムなので、ファイルとしてパソコンに保存する必要があります。ここで最初に決めておきたいのが、保存する場所です。

Chromeは「このフォルダの中身を読み込んでください」という指示を覚えます。そのため、一度読み込ませたフォルダは、後から移動したり名前を変えたりしないでください。読み込めなくなってしまいます。

デスクトップなど分かりやすい場所に、専用のフォルダを1つ作っておきましょう。今後いくつ拡張機能を作っても、このフォルダの中に入れていく運用にすれば迷いません。

フォルダを1つ決めておくだけで、この後がぐっと楽になりますよ。

総務のナギくん

AIに伝えるのは「Wikipediaをどうしたいか」だけ

保存場所が決まったら、あとはAIに欲しい機能を伝えるだけです。

例えば、次のように伝えるだけで十分です。

ここに含まれているのは、対象・困りごと・実現したいこと・自分のレベルの4点だけです。この一文だけで、必要なファイル一式を手順つきで出してくれます。

プロンプトを丸暗記する必要はありません。この4点さえ伝われば十分ですよ。

総務のナギくん

ここで9割がつまずく、ファイル名の1文字

AIが出してくれたコードを保存するだけ、と思うかもしれませんが、実はここが最大の関門です。

拡張機能のプログラムは、決まった名前・決まった形式で保存しないと機能しません。例えば設計図の役割を持つファイルは、「manifest.json」という名前で保存する必要があります。これを1文字でも間違えると、拡張機能全体が読み込まれなくなります。

さらに注意したいのが拡張子です。Windowsでメモ帳から保存すると、「manifest.json.txt」のように、意図しない拡張子が余分についてしまうことがあります。保存時は「ファイルの種類」を「すべてのファイル」に切り替えてください。そのうえで、ファイル名の末尾が「.json」で終わっているかを確認しましょう。

• ファイル名は、AIが指定した通りに一字一句そのまま入力する
• 保存時の「ファイルの種類」は、必ず「すべてのファイル」を選ぶ
• 保存後、拡張子が意図した通りになっているか（.txtが余分についていないか）を確認する

この3点さえ守れば、保存でつまずくことはほとんどなくなります。

保存さえ乗り越えれば、あとは驚くほどスムーズに進みますよ。

総務のナギくん

Chromeへの読み込みは、たった4ステップ

ファイルの保存ができたら、あとはChromeに読み込ませるだけです。

1. アドレスバーにchrome://extensions/と入力する
2. 右上の「デベロッパーモード」をオンにする
3. 「パッケージ化されていない拡張機能を読み込む」を選ぶ
4. 先ほど作成したフォルダを指定する

これだけで、自作の拡張機能が一覧に追加されます。修正した場合は、この画面で更新ボタンを押すのを忘れないでください。

読み込めたら、まずは表示を確認してみましょう。

総務のナギくん

直すために渡すのは、たった3つ

実際に動かしてみると、「思っていたのと違う」という場面が必ず出てきます。ここで諦める必要はありません。

「ボタンをもう少し右へ」「文字が小さい」など、気になったことをそのままAIに伝えれば直してくれます。エラーが出た場合は、エラー文章・スクリーンショット・現在のコードの3つを渡すのが近道です。

作る→試す→伝える→直す。この繰り返しこそが、拡張機能の完成度を上げる唯一のコツです。一度で完璧を目指す必要はありません。

最初の指示より、この後のやり取りの積み重ねの方が大事ですよ。

総務のナギくん

コードの知識がなくても、AIと一緒に手を動かせば今日から作れる、自分専用のChrome拡張機能。

次に作るとしたら、どんな「小さな不便」を解消しますか？