そんな今日この頃の技術ネタ

本家側に書くほどでもない小ネタ用

テキストフォーム入力のちょっとしたイライラを解消するChrome拡張作ってみた

久々にこっちのブログも上げとこうということで、ちょっとしたローカルLLMでのVibe Codingでの作ったものの紹介でも。(作成環境的な話は本家の記事の方で)

github.com


海外製のWebアプリなんかで、テキストの入力フォームがEnter押下で送信になっているのが漢字変換の確定で暴発して困る、みたいな場面ってちょいちょいあると思うんですよ。

かくいう僕も先日ColaboratoryのGeminiの入力フォームでそんな状況に遭遇してめちゃめちゃストレスだったんですな。

Enterで送信されちゃうフォーム

こういう時の泥臭い対処法としては、メモ帳でも開いてそっちに文字書いてコピー&ペーストするという手段になるんだけど、毎度それをするのも結構面倒なのでChrome拡張を作ってみた!


入力フォーム上で右クリックメニューから「テキストエリアダイアログを表示」を選択して起動。

コンテキストメニュー


入力用のダイアログが表示されるのでそこに文字を入力。

ダイアログ


OKボタンを押すとダイアログが閉じ、選択元のフォームに文字列入力される。

テキスト挿入


肝心のColabratoryだったりその他のデザイン凝ってるページだとフォーカスから入力フォームをちゃんと取得できなかったので、その場合はクリップボードにコピーする挙動で代替。

それでも自前でメモ帳開いて閉じてするよりはだいぶ楽なはずだ。

クリップボード版


めちゃめちゃシンプルな機能拡張ではあるけど、当初の目的の変換確定での送信防止の他にも単純にフォームが小さすぎるサイトでのUX改善とか送信がShift+EnterなのかEnterなのか分からないチャットで事故らずに長文作成とか、意外とあると助かる場面は多いんじゃないかって気がする。

気が向いたらウェブストア登録やってみようかなあ。


今回は9割方はCline+Qwen3-coder:30bで自動で作成できていて、フォームのデザイン的な微調整だとか冗長なコードの削除や処理の移動などのリファクタリングをちょっと手作業で行うぐらいの作業感で完成までもっていけた。

他にgolangのWailsでデスクトップアプリを作ろうとした際にはあんまり上手くいかなかったんだけど、今回のような特に珍しいライブラリを使うとかではないシンプルな案件だとvibe codingは結構うまく働いてくれる。

Chrome拡張なんかを作ろうと思った場合、人手でやると初手のmanifest.jsonの書き方だのchromeの関数の呼び方だのの調査でかなり時間が食われてしまうわけで、vibe codingならそのあたりをある程度ショートカットしてすぐにメインの処理に取り掛かれるのはかなりありがたいと思う。