Chrome拡張機能を作成するのにハマっています。
シンプルな拡張機能なら、AIと対話をすれば拡張機能が作れてしまいます。
Chrome拡張機能を作るのに必要な物
・パソコン（Windows）
・使用するAIに対応したアカウント
Googleアカウント → Gemini
Microsoftアカウント → Copilot
ChatGPT
3つとも、プログラムを作成してくれます。
私は3つとも使用しております。
賢さは
Gemini ＞ ChatGPT ＞ Copilot
というのが私の感想。
今回はGemini(Google)を用いて作成しました。
ChatGPTはプログラムを作成しているとすぐに使用制限が掛かる為、注意が必要です。
（有料プランなら大丈夫ですが）
あとはファイルの知識。
・フォルダやファイルを作成する
・ファイルの拡張子を表示する
・テキストファイルで作成し、拡張子ごと書き換えてしまう
・テキストファイルで作成し、UTF-8形式で保存する
などの知識が必要です。
ググればやり方は判ります。
どんな拡張機能を作る？
私の場合は、Chromeで「右のタブをすべて閉じる」系統の拡張機能をいつも使っていました。
しかし、マニフェストがV2からV3への変更が必須となり、別の拡張機能を探した経緯があります。
「どうせなら、自分好みの機能を追加して作成してみたい」
と思ったのがきっかけでした。
今回は、
「右のタブをすべて閉じる」をメインに、
「左のタブをすべて閉じる」「両側のタブをすべて閉じる」
の機能を持たせた拡張機能を作ってみます。
拡張機能を作ってみよう
まずはGeminiのページにアクセス。
以下のように提案しました。
次のChrome拡張機能を作ってください
拡張機能の名前は「右タブ閉じる」
バージョン＝1.0
manifest＝V3
UIは日本語
アイコン＝SVG形式で右向きの矢印で作る
アイコンを左クリックすると、今開いているタブの右側のタブをすべて閉じる
アイコンを右クリックしたときのメニューで、「左側のタブをすべて閉じる」という項目を追加
その項目を選択すると、今開いているタブの左側のタブをすべて閉じる
アイコンを右クリックしたときのメニューで、「これ以外のタブをすべて閉じる」という項目を追加
その項目を選択すると、今開いているタブの左側と右側のタブをすべて閉じる
いきなり何を言ってるんだコイツは？
と思われるかも知れませんが。
ある程度作成を経験すると、AIに聞き返される内容があらかじめ解ってきます。
なので「バージョン、manifest＝V3、UIは日本語」などは、
毎回唱えるおまじないのような物だと思ってください。
（後述しますが、「”description”、”default_title”は日本語を使わない」も加えたい）
アイコンはPNG形式の画像か、SVG方式の描画で作った物のどちらかです。
最初は作らないで、後から付け足してもOKです。
（場合によっては作れと言われます）
（実際、こう書いていますがアイコンはうまく作れてませんでした）
すると、以下のように返ってきました。
フォルダ構成です。
「タブを閉じるだけ」というシンプルな機能なので、ファイル構成も少なめです。
普通は5ファイルぐらいあります。
こんな風に、プログラムを書いてくれます。
ここでプログラムを書き写す方法ですが、
①拡張機能をまとめるフォルダを作る。
（例：「CloseR」フォルダ）
②「CloseR」フォルダ内に、新規テキストファイルを３個作る。
③「icon.svg」「manifest.json」「service-worker.js」に、拡張子ごと書き換える
④テキストエディタなどで開いて、コードを貼り付ける
（コードは先程のAI回答のプログラムの右上のボタン□からコピーできます）
コピーペーストで、プログラム一式ができました。
なお、一部の保存形式に注意する必要があります。
「manifest.json」ファイルは、UTF-8形式で保存する必要あり。
↑メモ帳の場合
↑サクラエディタの場合
完成したら、GoogleChromeの拡張機能のページを開きます。
そこに、フォルダごとドーンと突っ込みます。
エラーがある場合、以下のように返ってきます。
エラーが出たら、AIにこの質問をそのまま貼り付けてやれば、何かしら改良して返ってきます。
修正されたコードを再度コピペして上書きし、エラーを消していきます。
この繰り返しのエラー潰しが、一番根気のいる作業です。
なお、エラー内容は
「”description”、”default_title”に日本語が使われている」
のが原因でした。
これ、今回紹介した３つのAI全てで起こるエラーなんです…。
なのでプログラム作成時は、
“description”、”default_title”は日本語を使わない
という文章を初めから付け足したほうが良いです。
（今回はエラー画面の例を示す為に、ワザと抜きました）
エラー０になれば、拡張機能のページに、作成した拡張機能が表示されます。
Chromeの拡張機能で、ボタンを固定すれば常に表示されます。
実際に使用してみた
完成した拡張機能を使用してみます。
３つのタブを開き、真ん中をアクティブにしています。
アイコンを左クリックすると、右のタブが閉じました。
成功です！
アイコンを右クリックすると、２つの機能がちゃんとあります。
再度３つのタブで真ん中をアクティブにして、
「左側のタブをすべて閉じる」を押すと、左のタブが閉じました！
こちらも成功です。
同様に準備して、
「これ以外のタブをすべて閉じる」を押すと、両サイドのタブが閉じました！
これで全部成功です。
便利な拡張機能を作ってみよう！
今回は実例を交えつつ、AIでの拡張機能の作り方を紹介しました。
プログラムの中身の意味は、私もよく解っていません（汗）
少し難しいかも知れませんが、
使いこなせば、自分の欲しい機能を叶えられる可能性があります。
皆さんも少し試してみてはいかがでしょうか…？
