Geminiでサイトの構造を検出する拡張機能の作成

トレンドを収集しているとですね、皆さん口を揃えて言うわけです。
AIエディターを使えと。

やはり最近の主流はAIですね。
なので試しにGeminiで拡張機能を作ってみようと思うわけです。

そこでまずどのようなものが良いか候補を20個ほど出してみたところ、
サイトのCSSを拾う機能を提案されました。
なるほど、これは業務でもよく使いそうな機能ですね。

その結果できたのがこれ。

そのキレイなサイトを吹っ飛ばしてやる!!



CSSを取得するだけではなかったのかと。
ついでに取得した要素を明後日の方向に飛ばして削除する機能をつけました。

Q.なんでそんな機能をつけたんだい？
A.生成したコードを掲載するつもりがなかったのでお見せできるものを作るため。

というわけでコードを生成していく過程のお話。

Geminiで生成する

さて、まず候補として出してきた本機能の概要は以下のものです。

CSSセレクタ抽出アシスタント
ページ上の要素をクリックすると、その要素に至る最も効率的なCSSセレクタ（またはXPath）を自動生成し、クリップボードにコピーする。

機能はページ内をクリックすることでその要素のCSSセレクタを得る。
ではそのサンプルコードを出してみてと命令するとポップアップを使うサンプルコードを出してきました。

拡張機能を作っている方ならもうお気づきでしょう。
ページ内をクリックするのに始動がポップアップなのである。
結果を得るのにポップアップを使ったら、
ページ内をクリックした時点でポップアップは閉じ機能しなくなるのである。

とりあえずインストールして使ってみると、ちゃんと動作はするのですが
ページ内をクリックすると同時にポップアップが閉じて使い物になりません。

それを指摘すると「ア、ハイ」といって改善案を2つ出してきました。
・ポップアップは機能のON/OFFのみとして、すべてコンテンツスクリプトで表示する
・サイドパネルを使う

ただサイドパネルの注釈に「バージョンの問題があります」と書いてきました。
それって3年前の話だよなぁと。考慮するに越したことはないのですが。

そうして
・サイドパネル使用
・セレクタの取得はクリックではなくmouseenter
・キーボードでEキーを押下したらその要素を削除

といった仕様を順に加えたものが先の動画の拡張機能です。
吐き出されたコードはサイドパネルのCSS以外修正していません。
それでこれだけ狙い通りの物ができるのだからAI生成は確かにすごいですね。

なおキーボードの時に「サイドパネルのjsに組み込む」命令をしているのでスムーズにできていますが
その命令をしなかったらコンテンツスクリプトに書くかもしれません。

そうするとページとサイドパネルのどちらがアクティブかわからなくなり
始動と削除がスムーズにできないかもしれません。
そういったところは恐らく考慮してくれないのでしょうね。