#81 AIと作る！Chrome拡張機能、探すより作れば早い

7月 10, 2025

こんにちは、ちーみつです。

AIを少しずつ取り入れて日常をラクに。

ラクになれば心に余裕が生まれ、
その余裕がやさしさにつながり、
やさしさが広がって世の中をちょっと良くしていく──

そんな未来を願って、発信しています。

今回は、バイブコーディングで初めてChromeの拡張機能を作りました。

Gemini CLIを使って、
一時的に後で読みたいページを保存しておける拡張機能です。

AIとバイブコーディングで作るChrome拡張機能

見た目はこんな感じです。↑

今回作ったChrome拡張機能は、こんな特徴があります。

* 直感的なドラッグ＆ドロップ保存:

ウェブページ上でAlt（macなら⌥option）キーを押しながら右にドラッグするだけで、
現在開いているページを「あとで読む」リストに簡単に追加できます。
通常のテキスト選択と区別されるため、誤操作の心配もありません。

* スマートなサイドバー表示:

マウスカーソルをブラウザの右端に持っていくと、
保存されたページがリスト形式で表示されるサイドバーが自動で出現します。
もちろん、拡張機能のアイコンをクリックして開くことも可能です。

* シンプルでミニマルなデザイン:

閲覧中のコンテンツの邪魔にならないよう、
クリーンで洗練されたデザインを採用しています。

* 手軽なアクセスと管理:

リスト内の項目をクリックすれば新しいタブでページが開き、
不要になったページは簡単に削除できます。

一時的に保存しておきたいページがある場合に
ドラッグだけで保存しておきます。

必要なければ消すこともできます。

Google Chromeの拡張機能もあっという間に作れて、

さらにできることが増えました。

ウェブアプリもいいですが、
拡張機能もパッと作れて試せるのは
探す手間が省けてちょっとありがたいです。

今後は拡張機能を探すより作ったほうが早くなるかもしれないですね。

指示するだけで作ってくれるバイブコーディングは
もっと使いこなせるようになりたいです。

今後もちょっとこんな機能欲しいなと思ったら、
パッと作ってみようと思います。

最後まで読んでいただきありがとうございます。

※メルマガ登録プレゼントに、この拡張機能を作るために最初に作った要件定義書も追加しました。

同じ内容を音声でも配信しています。
移動中などお耳が開いている時などにどうぞ！