半Vibe CodingでChrome拡張を作ってみた　続

先日CursorでほぼVibe CodingでChrome拡張を作りました。

この拡張では右クリックメニューから拡張専用メニューを選択すると、任意のプロンプト＋選択中のテキストをクリップボードにコピーしてAIサービスのプロンプト入力ページを新しいタブで開くことができるようになっています。ただ、本来やりたかったのは拡張だけで任意のプロンプト＋選択中のテキストをAIサービスにプロンプトを送信するところだったので、今回はそれを実現するためのリベンジです。

成果物

というわけでは今回はCursorに前回のリポジトリを修正してもらい、任意のプロンプト＋選択中のテキストをOpenAI APIに送信して結果を画面表示するようにしてみました。

https://github.com/TansanMilMil/zubora-gpt-extension-v2

スクリーンショット

OpenAI API利用にあたってAPIキーでの認証が必要なので、まずオプションメニューで予め生成しておいたAPIキーを入力して保存します。 prefixとして付与するプロンプトには日本語訳をしてもらうよう指示を書いておきます。

任意のサイトの英文を選択し、専用の右クリックメニューを選択します。

こんな感じでOpenAIからのレスポンスが画面に表示されます。ちゃんと翻訳してくれてますね。

やってみての感想

８割方意図通りに仕様変更してくれた

「新しいタブでAIサービスを開くのではなく、OpenAI APIへリクエストして結果を画面表示してください」といった旨のプロンプトで仕様変更を指示したところ、既存のオプションメニューへのAPIキーの入力フォーム追加やOpen AI APIへのfetch処理をほぼ意図通り書いてくれました。仕様変更によって不要になった処理の削除も特につまづくこともなくやってくれたのでなかなか優秀です。

CSSの微妙さは変わらず

人間が見たら明らかに違和感のあるボタンのpaddingの付け方をしたり、position: fixedで表示するDOMの位置が中途半端な位置だったり、前回同様に微妙でした。正直人力で直したり改良した方が早かったです。

一貫性のある設計での出力は苦手そう

具体例としては、今回ReactのComponentは以下のように1つのComponentにつき1つのtsxファイルで管理するようにしていました。

https://github.com/TansanMilMil/zubora-gpt-extension-v2/blob/main/src/components/Popup.tsx

ただ、最初に生成してもらったコードには1つのtsxファイルに複数のComponentのレンダリングに関する処理が混じっていたので人力で直すことに。。

予めCursor RulesでReactの設計方針を定義しておくと改善するかも。