「ブラウザに“自分専用の便利機能”がついたら最高じゃない？」 そんな夢を叶えてくれるのが、Chrome拡張機能。そして今、ChatGPTなどのAIを使えば、プログラミングが苦手でも自作できちゃう時代です。 この記事では、AIの力を借りながらChrome拡張を作る方法を、できるだけシンプル＆実践的に紹介します！
目次
Chrome拡張ってなに？
Chrome拡張（ブラウザ拡張）とは、Google Chromeにあとから追加できる“ミニアプリ”のようなもの。
たとえば：
- 広告をブロックする
- 翻訳ボタンを追加する
- ページの文字色を自動で変える
こうした機能は、すべて拡張機能で実現されています。
💡 自分で作れば、自分好みにカスタマイズし放題！
AIを使うメリットって？
| メリット | 内容 |
|---|---|
| コーディングのハードルが下がる | ChatGPTがコードを提案・修正してくれる |
| わからない点をすぐ聞ける | 「このエラーなに？」も、AIに聞けば日本語で解説してくれる |
| 実験しながら学べる | 「こうしたらどうなる？」をすぐ試せて、学習効率が高まる |
実際に作ってみよう｜日付を表示する拡張機能
今回は、クリックすると今日の日付を表示してくれる拡張を作ってみます。
1. 構成をChatGPTに聞いてみる
まずはChatGPTにこう質問：
Chrome拡張を作りたいんだけど、クリックしたら今日の日付を表示するやつ、構成を教えて！
返ってくる構成例：
my-extension/
├── manifest.json
├── popup.html
├── popup.js2. ファイルの中身をAIと一緒に作る
▶️ manifest.json
{
"manifest_version": 3,
"name": "Date Display",
"version": "1.0",
"action": {
"default_popup": "popup.html"
}
}▶️ popup.html
<body>
<p id="date"></p>
<script src="popup.js"></script>
</body>▶️ popup.js
const date = new Date().toLocaleDateString();
document.getElementById("date").textContent = `Today: ${date}`;3. Chromeに読み込ませる
- Chromeのアドレスバーに
chrome://extensions/と入力 - 右上の「デベロッパーモード」をオンに
- 「パッケージ化されていない拡張機能を読み込む」ボタンをクリック
my-extensionフォルダを選択
ツールバーに拡張が表示されれば成功！
AIを使うときの注意点
| 注意点 | 内容 |
| 提案されたコードが正確とは限らない | たまに書き間違いや古い構文を含むことがある |
| セキュリティチェックは必要 | 権限の設定などは、自分でもしっかり確認しよう |
| ChatGPTの説明が難しいこともある | 説明がややこしいときは要約してもらう、または他サイトも参考に |
🧠 “AI＝万能”ではないけど、うまく使えば最強の相棒になります！
まとめ
- Chrome拡張は“自分専用ツール”を作る最高の手段
- AIの助けを借りれば、初心者でも気軽にチャレンジできる
- 小さなツールから試して、徐々にスキルアップしていこう！
最初の一歩は「とりあえず作ってみる」こと。今回のようなミニ拡張から、ぜひスタートしてみてください！
コメント