Chrome拡張機能をAIで誰でも簡単に作る方法【Gemini】

プログラミング

YouTubeを見ていてどうしても不満なことがありました。

それは「YouTubeのコメント欄などを非表示にできるボタンがほしい!」ということです。

確かに既存の拡張機能はあります。

しかし細かい所まで設定できなくて不満が残っていました。

これは自分で作るしかない、ということで今回はAIを使って超簡単に作ってみました。

 

①どんな拡張機能を作るかをテキスト化

まず「どういうChrome拡張機能を作りたいか」をメモ帳などに入力します。

私の場合は以下の通りです。

 

-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-

下記の「#問題」を解決するChrome拡張機能を作りたい。

「#機能」を参考にコードを生成してほしい。

#問題

YouTubeの動画再生ページのコメント欄と関連動画と、YouTubeのホーム画面のホームフィードを見たくないため表示しないようにしたい。ただ、たまに見たくなる時があるため、その時にはボタン一つで表示できるようにしたい。

#機能

①YouTubeの動画再生ページのコメント欄を隠すことができるボタンを追加する。

②YouTubeの動画再生ページの関連動画を非表示にするボタンを追加する。

③YouTubeのホーム画面のホームフィードを非表示にするボタンを追加する。

-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-

 

②AIにテキストを入力

伝える内容が決まったらAIに入力します。

今回は、Geiminiを使ってみました。

Gemini https://gemini.google.com/?hl=ja

ここに先ほどのテキストを入力すると以下の回答が返ってきました。

回答の内容をまとめると、

まず以下3つのファイルを準備してくれました。

・manifest.json

・style.css

・content.js

上記3つのファイルはChrome拡張機能の構成ファイルです。

上記3つのファイルを入れるフォルダを作るためデスクトップに新規フォルダを作り、ファイル名をここでは仮に「youtube-cleaner」としこの中に移動します。

 

※1 仮に上記3つよりファイル数が足りていないことがあっても問題なく動作します。

※2 上記のファイルをPCにダウンロードすると全く別名で保存されることがあります。

  その時は上記3つのファイル名に必ず書き換えておきましょう。

 

 

③Chromeで拡張機能を読み込み動作確認

次にChromeを開いて、右上の「縦三点リーダー」→「拡張機能」→「拡張機能の管理」とクリックします。

拡張機能の管理画面が出るので、右上に「デベロッパーモード」というスイッチがあると思うので、これをオンにします。

すると左上に「パッケージ化されていない拡張機能を読み込む」というボタンが表示されるので、これをクリックし、先ほど作成したフォルダ(今回は youtube-cleaner)を選択して「フォルダーの選択」ボタンをクリックします。

以上で拡張機能がChromeに読み込まれたかと思います。

あとは、拡張機能が正常に動作しているか、目的のサイトを開くなどして確認してみましょう。

 

④手直し

おそらくChromeで拡張機能を読み込んでみると、思い通りに機能しないと思います。

そういう時は、先ほどの①~③の流れを繰り返します。

①AIに修正点を伝え、②AIからファイルが生成され、③Chromeに読み込んで動作確認・・・という流れです。

これを何度も繰り返し、作りたい拡張機能に近づけていきます。

修正点について、私の場合は以下の通り入力しました。

-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-

ボタンについて、隠している間のボタンのテキストが”Show”、表示している間のボタンのテキストが”Hide”。

ボタンのテキストのサイズは14px。ボタンのサイズも大きすぎないようにする。ボタンの色は灰色にする。ボタンは中央揃えで配置する。

-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-

修正を加えて完成した拡張機能が以下の通りです。

●YouTubeホーム画面

YouTubeのホームフィードをボタン一つで表示・非表示ができるようになりました。

 

●YouTube動画再生ページ

YouTubeのコメント欄・関連動画をボタン一つで表示・非表示ができるようになりました。

 

⑤あとがき

これまでは拡張機能を作ることはド素人には難しかったですが、今では何も知らない人でも簡単に作れるようになりました。

しかし、細かい修正をするには具体的な知識が必要になるので、「もっと理想に近づけたい」という人は勉強してみると良いのかもしれません。

今回はほぼ満足に近いものができたので、私は大満足でした!

タイトルとURLをコピーしました