暑さ寒さも彼岸までとはよく言いますが、本当に涼しくなるんでしょうか。
今年も暑さに負けてバイクでのお出かけがめっきり減っているGAhackです。
仕方がないので、休みの日は某VTuberの自習室を導入として、その後の時間はほとんどAIと会話をして過ごしていました。
そこで引きこもった成果をおすそわけです。
今回は、普段みなさんが使っているであろうChromeをちょっと便利にしてみましょうといった内容です。
普段から拡張機能を使って、色々と便利にしている方が多いと思います。
ですが、ウェブストアからダウンロードして使っているだけではないでしょうか？
拡張機能って実は自分でも作れて、結構痒い所に手が届くものが作れるんですよ。
「拡張機能を作るなんて無理！」
「プログラムなんてわからないし！」
「難しそうだから今回は遠慮します…」と思ったそこのあなた、戻ってきてください。
GAhackもプログラムなんてさっぱりわかりません。
エナドリ片手に黒い画面に向かってカタカタと打ち込むようなこともするつもりはありません。
では、どうやって作るのか？というと、日進月歩で進化している「AI」を使っていきましょう。
AIといえば、やはり一番有名なのはOpenAIのChatGPTでしょうか。
他にも色々なAIサービスがありますが、やりたいことに適したAIを選ぶのが大切です。
今回はプログラムに関することなので、GitHub Copilotというサービスを使います。
サービスのサイトは英語ですし、質問したり回答を受け取る部分も英語表記ですが、実際のやりとりは日本語で大丈夫です。
質問も回答も日本語で返ってくるのでご安心ください。
まずは、サービスに登録する必要があります。
GitHub Copilotのページに行くと右上あたりに「Sign in」とあります。
そこからGoogleアカウントでログインができるので、Googleアカウントとの連携をしましょう。
サービスを開始すると英語の画面（ダッシュボード）が出てくるので、左上のメニューから「Copilot」を選択することで、サービスを開始することができます。
下準備が完了したら、さっそく拡張機能を作っていきましょう。
ところで、拡張機能って一体どうやって作るのでしょうか？
早速、AIの出番です。
AIに指示を出すことを「プロンプト」と呼びます。
まずは以下のプロンプトを入力してみましょう。
「Chromeの拡張機能を作りたいので、作り方を教えてください。」
すると、拡張機能の作り方を順序立てて教えてくれます。
文字だけだと伝わりづらいかもしれませんが、拡張機能の基本フォルダ構成は以下のようになるそうです。
“`
chrome-extension/
├── manifest.json // 拡張機能の設定ファイル
├── background.js // バックグラウンドで動作するスクリプト
├── content.js // ページに注入するコンテンツスクリプト
├── popup/ // ポップアップ画面のファイル
│ ├── popup.html
│ ├── popup.js
│ └── popup.css
├── options/ // オプション画面(任意)のファイル
│ ├── options.html
│ ├── options.js
│ └── options.css
└── icons/ // アイコン画像
├── icon16.png
├── icon48.png
└── icon128.png
“`
このように、フォルダ構成がわかれば大まかな形が見えてきます。
「manifest.json」という設定ファイルを用意することで拡張機能を定義できるという仕組みです。
さて、「json」さんって誰なんでしょうね。
とはいえ、構成だけ分かっても実際に書けるわけではありません。
ここからが本題です。
今度は続けて以下のプロンプトを入力してみます。
「じゃんぱらのECサイトをダークモードにする拡張機能を作ってください。」
すると、必要な手順とコードを教えてくれます。
コードはダウンロードして保存できます。
そして、先ほどのフォルダ構成になるようにフォルダを作り、その中にコードを放り込みましょう。
これで準備はOKです。
拡張機能が完成したら、Chromeにインストールします。
右上メニューから「拡張機能」→「拡張機能の管理」を開きます。
画面が表示されたら右上の「デベロッパーモード」のトグルをONにします。
すると「パッケージ化されていない拡張機能を読み込む」というメニューが使えるようになります。
それを選んで、先ほど作ったフォルダを選択すると・・・。
はい。
エラーが発生しました。
原因がわからないので、そのままAIに聞いてみます。
「ダウンロードしてフォルダにまとめましたが、以下のエラーが発生しました。
原因を調べてエラーが発生しないようにしてください。
ファイル
~/ダウンロード/ダークモードじゃんぱら
エラー
マニフェスト ファイルが見つからないか読み取れません
マニフェストを読み込めませんでした。」
するとAIが、エラーの内容と対処法を丁寧に教えてくれます。
今回の原因は、「manifest.json」のファイル名が「manifest_Version2.json」になっていたことでした。
「_Version2」の部分を削除して、正しい名前に変更します。
他のファイルにも同様に余計なバージョン名などがついていたら削除してあげましょう。
また別のエラーが出ました。
再度AIに質問します。
「今度は以下のエラーが発生しました。
原因を調べてエラーが出ないようにしてください。
ファイル
~/ダウンロード/ダークモードじゃんぱら
エラー
Could not load icon ‘icon.png’ specified in ‘icons’.
マニフェストを読み込めませんでした。」
ざっくり説明すると「icon.png」が存在しないことが原因でした。
いらないからといって「manifest.json」に定義したままでファイルがないとエラーになるようです。
AIが、アイコン定義を削除した修正済みの「manifest.json」も用意してくれました。
ちなみに、jsonファイルは普通のテキストエディタで開けます。
再チャレンジしてインストールしてみます。
はい、無事登録されました。
じゃんぱらのページを開いてみましょう。
おぉ！
いつものページが見事にダークモードに変わりました。
一切プログラムに触れることなく、自分だけの拡張機能を作ることができました。
少し雑に「ダークモードにして」とAIに伝えただけなのに、ここまでできるとは驚きです。
おそらく背景色を黒く指定しているのだと思いますが、応用できる余地がありそうです。
これだけだと物足りないので、さらに「じゃんぱらのサイトでだけカーソルが変わる拡張機能」を作ってもらうことにしました。
まずはプロンプトを書いてみました。
「じゃんぱらのページでだけ、カーソルを指定の画像に変更したいです。
画像はこちらで用意するので、ファイル名の指示をしてください。」
しかし、必要なファイルが足りず、うまく動きません。
仕方がないので、不足ファイルをAIに伝えてリクエストします。
「content.js がないと表示されました。
どのファイルでしょうか。」
その結果、生成されたファイルを追加して試してみたところ反映されませんでした。
何度かAIにエラー内容や何ができていないかを伝えることで、修正ファイルを出してもらいました。
最後、ヤケクソなのか英語で返されましたが、ファイル内容はしっかりしていたので差し替えてみたところ、無事反映されました。
カーソルが変わりました。
GAhackのように、プログラムが一切書けなくても・読めなくても、AIだけで拡張機能を作成できました。
コツは、トライ＆エラーを繰り返すことです。
その都度出てくるエラーをAIに知らせて修正してもらいましょう。
何度かやっているうちに、コードを見てエラーに気づけるようになるかもしれません。
AIは何を聞いても、同じことを何回聞いても怒る事はありません。
納得いくまで繰り返し試して、自分だけの機能を形にしてみてください。
今回の手順を応用すれば、JavaやC、Pythonなどを使ったもっと複雑なプログラムも作成できます。
ちょっとした不便を解消するツールが自分で作れるようになるので、慣れてくるととても重宝します。
最近では、Windows11の要件を満たしていないパソコンが安価に入手できる状態になっています。
AIを活用したコーディング用に1台持っておくのもアリかもしれません。
じゃんぱらでパソコンを探す
以上、夏の間、ずっとAIと会話していたGAhackがお届けしました。
