【ITニュース解説】Criando uma extensão do Chrome em minutos com ChatGPT

このニュース記事は、私たちが普段使っているWebブラウザの一つであるGoogle Chromeに、自分だけの便利な機能を追加する方法について語っている。具体的には、「現在のタブを自動で決まった時間ごとに再読み込みする」というシンプルな拡張機能を作るプロセスを紹介している。システムエンジニアを目指す皆さんも、日々の業務や学習で「こんな機能があったら便利なのに」と感じる場面があるだろう。この記事では、そのようなアイデアを、最新の人工知能（AI）であるChatGPTを「相棒」として活用し、驚くほど短時間で実現する手法が示されている。

通常、新しいソフトウェアや機能を作る際には、多くの時間と専門知識が必要だ。しかし、この記事の筆者は、自動タブ再読み込みというニーズに対し、何時間もかけて手動でコードを書いたり調べたりする代わりに、ChatGPTに「ベースとなる部分を作ってほしい」と頼んでみた。その結果、わずか数十分で、実際に動く拡張機能の骨格を手に入れることができたという。これは、開発の新しい形を示す非常に興味深い事例と言える。

この拡張機能は、いくつかの重要な要件を満たす必要があった。例えば、「決まった時間間隔で再読み込みができること」「再読み込みのタイミングをカスタム設定できること」「Webページのキャッシュを無視して常に最新の内容を読み込めること（まるでCtrl+F5を押すように）」「使いやすくシンプルな画面であること」「そして何よりも安全であること」などだ。これらすべてを、ChatGPTと協力して実現した。

筆者が最初にChatGPTに与えた指示（これを「プロンプト」と呼ぶ）は、「安全で素早くChrome拡張機能を作成したい。現在のタブをX秒ごとに自動で再読み込みする機能だ。ファイル構造を分け、セキュリティを確保し、モダンなダークテーマのUI、整理されたコード、そしてアイコンを提案してほしい。各ファイルをコピー＆ペーストできる形で提供してほしい」というものだった。この詳細な指示に対し、ChatGPTは「manifest.json」「background.js」「popup.html」「popup.js」といった、拡張機能の基本的な構成ファイルをそれぞれ生成してくれた。

これらのファイルがどのような役割を果たすのかを簡単に説明しよう。「manifest.json」は、拡張機能の「設計図」のようなもので、名前やバージョン、必要な権限、どのスクリプトがどこで動くかといった、拡張機能全体の重要な設定情報が書かれている。「background.js」は、普段は目に見えない場所で動いて、拡張機能の「裏方の仕事」をするスクリプトだ。この拡張機能の場合、設定された時間間隔でタブを再読み込みする命令を出すのがこのファイルだ。「popup.html」は、Chromeのツールバーにある拡張機能のアイコンをクリックしたときに表示される小さな「ポップアップ画面」の見た目を定義するHTMLファイルで、ユーザーが設定を変更するためのボタンや入力欄がここにある。「popup.js」は、このポップアップ画面の中のボタンが押されたときや、入力欄に文字が入力されたときなどに、どのような処理を行うかを決めるJavaScriptのコードだ。「popup.css」は、ポップアップ画面の見た目を美しく整えるためのスタイル情報が書かれている。そして、「icons/」フォルダには、拡張機能のアイコン画像が様々なサイズで格納されている。これらは、拡張機能がChromeのツールバーや設定画面で適切に表示されるために必要だ。

ChatGPTが生成した基本的な骨格を元に、筆者はさらに便利な機能を追加していった。例えば、5秒、10秒、30秒といった「よく使う再読み込み間隔」を素早く選べるプリセットボタンや、自分で好きな秒数を入力できるカスタム設定、さらにキーボードショートカット（Ctrl+Shift+LやCmd+Shift+L）で瞬時に再読み込みを操作できる機能、次回の再読み込みまでの残り時間をリアルタイムで表示するカウントダウン機能などが盛り込まれた。

開発において非常に重要なのが「セキュリティ」だ。特にWebに公開される可能性のある拡張機能では、悪意のある攻撃からユーザーを守るための対策が必須となる。この記事で挙げられている対策として、「CSP（Content Security Policy）の厳格な設定」がある。これは、拡張機能が読み込むことのできるリソース（スクリプトやスタイルなど）を制限することで、不正なコードの実行を防ぐ仕組みだ。また、「必要最小限の権限（permissions）」しか要求しないという原則も守られている。「tabs」（タブの操作）、「storage」（設定の保存）、「alarms」（時間指定の処理）、「activeTab」（現在開いているタブへのアクセス）といった、機能を実現するために本当に必要な権限だけを許可しているのだ。さらに、ユーザーが入力する再読み込み間隔が、1秒から24時間の範囲内であるかをチェックするなど、不正な入力による問題を未然に防ぐ工夫もされている。タブが閉じられたときに、設定した自動再読み込みのタイマーを自動的に解除する「クリーンアップ」も行われ、リソースの無駄遣いを防いでいる。

自分で作った拡張機能を実際に動かしてみる「ローカルテスト」の方法も紹介されている。これは非常に簡単で、まず拡張機能のファイル一式を「auto-reloader/」という名前のフォルダに入れる。次に、Chromeブラウザのアドレスバーに「chrome://extensions」と入力して拡張機能管理画面を開き、「デベロッパーモード」をオンにする。そして「パッケージ化されていない拡張機能を読み込む」ボタンをクリックし、先ほど作成した「auto-reloader/」フォルダを選択するだけだ。すると、作成した拡張機能がChromeに読み込まれ、ツールバーにアイコンが表示され、すぐに試せるようになる。

アイコンについても、筆者はChatGPTを有効活用した。再読み込みを象徴する「ループする矢印の円」のようなビジュアルアイデアをChatGPTに求め、さらにその画像を生成してもらうこともできた。あとは、拡張機能が必要とするサイズ（16x16ピクセル、32x32ピクセルなど）に合わせて画像を調整するだけでよい。

この一連の経験から、筆者は「AIが開発パートナーとしてどれほど強力か」を実感したと語っている。ChatGPTは、単にコードを生成するだけでなく、ユーザーが使いやすいデザイン（UX）を考える手助けをし、セキュリティ上の注意点を教えてくれ、プロジェクトの構成を整理する提案をしてくれたり、さらにはアイコンやドキュメントの生成までサポートしてくれた。その結果、数時間、いや実際にはわずか30分ほどで、本当に欲しかった機能を持つ実用的な拡張機能が完成したという。

記事の最後には、他の開発者もChatGPTを同様に活用できるよう、具体的なプロンプトの例も提示されている。例えば、「Manifest V3のChrome拡張機能を作成したい。目的は[拡張機能がすべきこと]だ。技術要件として[ファイル構造、最小限の権限、入力検証、セキュリティ対策]を。UIは[含まれる要素、追加機能、スタイル]を。その他に[アイコン、コードの整理]を。各ファイルをブロックごとに提供してほしい」といった具合だ。このように具体的な指示を与えることで、ChatGPTはより的確なコードやアドバイスを提供してくれる。

結論として、この記事は、AIがもはや単なるツールではなく、開発者の「コパイロット（副操縦士）」として、私たちの生産性を劇的に向上させる存在であることを示している。AIがすべてを代替するのではなく、開発者が中心となってアイデアを出し、AIを賢く活用することで、これまで考えられなかったようなスピードと効率でプロジェクトを進めることができるのだ。システムエンジニアを目指す皆さんにとって、このようなAIとの協調は、これからの開発現場で必須となるスキルの一つになるだろう。