【ITニュース解説】Chromeの拡張機能ってAI使えば簡単に作れる説

Webブラウザの機能を自分好みに拡張できる「Chrome拡張機能」は、日々のインターネット利用を非常に便利にするツールである。しかし、その開発には従来、JavaScriptをはじめとするプログラミング言語の専門知識が不可欠であり、初心者にとっては参入障壁の高い領域であった。ところが近年、生成AI技術の目覚ましい発展により、この状況は一変した。プログラミングの経験が浅い人でも、AIとの対話を通じて、実用的なChrome拡張機能を短時間で作成できるようになったのである。ここでは、実際にAIを活用して「Googleの検索結果から特定のWebサイトを非表示にする」という拡張機能開発に成功した事例を通じて、その具体的なプロセスと技術的な背景を解説する。

この開発事例における最大の特徴は、開発者がコードを一行も書くことなく、AIに自然言語で指示を与えるだけで目的を達成した点にある。開発プロセスは極めてシンプルだ。まず、開発者は「Googleの検索結果から、特定のドメイン（この事例ではQiita）を含むリンクを非表示にしたい」という、作りたい拡張機能の仕様、すなわち「要件」を明確に言語化した。これがAIに対する指示書、いわゆる「プロンプト」となる。次に、このプロンプトをChatGPTのような生成AIに入力すると、AIは拡張機能の動作に必要な複数のファイルとその中身のプログラムコードを自動で生成する。開発者は、AIが出力したコードを指示された通りのファイル名で保存し、Chromeブラウザに読み込ませるだけで、目的の拡張機能が完成する。この流れは、従来数時間から数日かかっていたかもしれない開発工程を、わずか数分に短縮する可能性を秘めている。重要なのは、AIに何をさせたいかを具体的かつ明確に伝える能力であり、これが現代の開発における新たなスキルとなりつつある。

AIが生成したコードを理解するためには、Chrome拡張機能がどのような仕組みで動作しているかを知る必要がある。拡張機能は、主にいくつかの役割の異なるファイルから構成されている。今回の事例で生成された主要なファイルは「manifest.json」「content.js」「background.js」の三つである。まず「manifest.json」は、拡張機能の設計図や設定ファイルに相当する最も重要なファイルだ。このファイルには、拡張機能の名前、バージョン、説明といった基本情報に加え、どのような権限を要求するのか、そしてどのWebサイトでどのスクリプトファイルを実行するのかといった、拡張機能の振る舞いを定義する情報がJSON形式で記述されている。Chromeブラウザは、このmanifest.jsonファイルを最初に読み込み、拡張機能の全体像を把握する。次に「content.js」は、実際にWebページの内部で動作し、その内容を書き換える役割を担うJavaScriptファイルである。今回の事例では、Googleの検索結果ページで実行されるようにmanifest.jsonで指定されている。その具体的な処理は、表示されているWebページのHTML構造を解析し、検索結果の各項目を一つずつチェックする。そして、リンク先のURLに指定されたドメインが含まれている項目を見つけ出し、そのHTML要素ごと非表示にする、という操作を行う。このように、content.jsはWebページの見た目や動作に直接介入するための実行部隊と言える。最後に「background.js」は、その名の通り、Webページとは独立してバックグラウンドで動作するスクリプトである。特定のページが開かれているかどうかにかかわらず、ブラウザが起動している間は常に待機し、ブラウザのイベントを監視したり、拡張機能のアイコンがクリックされた際の動作を定義したりする。

AIによって生成されたこれらのファイルをローカル環境に保存した後、実際にブラウザで動作させる手順も非常に簡単である。まず、Chromeブラウザのアドレスバーに「chrome://extensions/」と入力して拡張機能の管理ページを開く。次に、ページの右上にある「デベロッパーモード」のスイッチをオンにする。これにより、開発中の拡張機能を読み込むためのメニューが表示される。そして、「パッケージ化されていない拡張機能を読み込む」というボタンをクリックし、先ほど保存したファイル群が格納されているフォルダを選択する。これだけで、開発した拡張機能がブラウザにインストールされ、即座に利用可能な状態となる。その後、Googleで何かしらのキーワードを検索し、検索結果に意図したドメインのページが含まれなくなったことを確認すれば、開発は完了である。このように、AIを活用すれば、コーディングからテストまでの一連の流れを、専門的な開発環境を構築することなく、極めてスムーズに進めることができる。

この事例は、生成AIがプログラミングの学習や開発における強力なアシスタントとなることを明確に示している。従来は専門知識を持つエンジニアでなければ実現が難しかったアイデアも、AIに適切な指示を与えることで、誰もが手軽に形にできる時代が到来した。これは、システムエンジニアを目指す初心者にとって、学習のハードルを下げ、実践的な開発経験を積む絶好の機会を提供するものである。一方で、AIが生成したコードが常に完璧であるとは限らないため、そのコードを読んで内容を理解し、必要に応じて修正する能力の重要性はむしろ高まっている。今後のエンジニアには、ゼロからコードを書き上げるスキルに加えて、AIと効果的に協業し、その生成物を適切に管理・活用していく能力が不可欠となるだろう。AIを単なるコード生成ツールとしてではなく、思考を整理し、開発を加速させるためのパートナーとして捉える視点が、これからのソフトウェア開発において成功の鍵を握ることになる。