こんにちは！[あなたの名前/ハンドルネーム]です。
このブログ「gemini-study-lab.com」では、プログラミング未経験から生成AIを使って、どこまで実用的なツールを作れるかに挑戦しています。
これまではPythonを使ってPC用のアプリ（.exe）を作ってきましたが、今回は少し趣向を変えて、「Webブラウザ（Google Chrome）の拡張機能」の開発にAIと一緒に挑んでみました！
なぜ「時計」の拡張機能を作ったのか？
皆さんはPCで作業している時、「今何時だろう？」と画面の右下（Windowsのタスクバー）へ視線を移すのが少し面倒に感じたことはありませんか？
わたしは特にタスクバーを隠しているので時間を確認するのはさらに手間でした。
ストアで探すのも良いですが、「せっかくならAIに自分専用のものを作らせてしまおう！」と思い立ったのがきっかけです。
完成した「ドラッグ移動可能なHUD時計」
AI（Antigravity）に要件を伝えて数分で完成したのが、こちらの拡張機能です。
【実装した主な機能】
- どんなWebページを開いても、右上に小さく現在時刻を表示
- マウスで掴んで（ドラッグして）好きな位置に自由に移動可能
- 作業の邪魔にならない半透明のダークテーマ＆ミニマルデザイン
- クリックを邪魔しないよう、最前面に表示しつつも主張を抑えたUI
右上のボタンを押したい時はサッとマウスでどかすことができる、非常に実用的で小回りの利くツールに仕上がりました。
AI（Antigravity）に投げた「要件定義プロンプト」大公開
今回は、Chrome拡張機能の最新ルールである「Manifest V3」に対応したコードを書かせるため、以下のような指示を出しました。
【要件定義】
Google Chromeで開いたWebページ上に、マウスで自由にドラッグして移動できる「常駐型のデジタル時計」を表示する、Manifest V3対応のChrome拡張機能を作成してください。【必要なファイル構成】
以下の3つのファイルを同一のフォルダ（例：draggable-clock-ext）内に生成してください。
manifest.json（拡張機能の設定ファイル。”content_scripts”を使用）content.js（時計の生成、現在時刻の毎秒更新、およびマウスでのドラッグ移動ロジック）styles.css（時計のミニマルなデザイン）【デザインと機能の要件】
- 初期位置は画面の「右上（少し余白を開けた位置）」に固定（
position: fixed）してください。- 時計の要素（div等）をマウスでクリックしたままドラッグすると、画面上の好きな位置に移動できるように
content.jsにマウスイベント（mousedown, mousemove, mouseup）を用いたドラッグ処理をネイティブJavaScriptで実装してください。- デザインは作業の邪魔にならないミニマルなものとし、角を少し丸めた半透明の黒背景に、白いシンプルなフォントで
14:25:00のように表示してください。マウスカーソルを乗せた時はcursor: grab、ドラッグ中はcursor: grabbingになるようにCSSを設定してください。- 他のWebページの要素の下に隠れないよう、
z-indexは最大値（例：999999）に設定してください。【開発プロセスへの指示】
完成後、Chromeの「パッケージ化されていない拡張機能を読み込む」からローカルインストールして動作確認する手順を出力してください。
外部ライブラリ（jQuery等）は一切使用せず、上記のファイルを自律的に作成し、フォルダにまとめてください。
AIエンジニアとしての見どころ
今回のハイライトは、Webページ上に自分のプログラムを注入する「Content Script」という技術と、要素をマウスでピクセル単位で動かす「ドラッグ＆ドロップ処理のJavaScript」を、AIが一発で矛盾なく書き上げた点です。
開発を終えて：自分専用の拡張機能は簡単に作れる！
「Chrome拡張機能」と聞くと、なんだか難しそうでストアの審査などが必要なイメージがありましたが、実はAIにファイルを作ってもらい、Chromeの「デベロッパーモード」からフォルダを読み込ませるだけで、誰でも簡単に自作ツールを導入できることが分かりました。
皆さんも「ブラウザにこんな機能があったらいいな」というアイデアがあれば、ぜひ生成AIに相談して、自分だけの拡張機能を作ってみてください！
コメント