開発時のフォーム入力を少し楽にするためのChrome Extensionを作った
最近は複数のフォーム入力項目があるページをお仕事で作ったりしてる。その中でUIを作ってる時に動作確認をするんだけど数十項目の入力フォームをいちいちゼロから埋めてsubmitして...みたいなことをするのが結構だるい。この作業を良い感じに手助けしてくれるChrome Extensionを作った(というか作っているところ)。
↓下記がデモとしてGoogle Formを埋めている例。Google Formは結構特殊でinput要素を全然使わずdivをボタンやチェックボックスにしているので一発入力できずに厳しいのだが90%くらいの要素は一気に埋められる。
https://user-images.githubusercontent.com/1421093/179355981-2729be7c-7552-4217-a9a2-1dc809997dc2.mp4
今回欲しかった機能としては、
- 任意のフォームのセレクタとvalueを指定して一発でフォームを埋めてくれる
- 入力パターンのセット(住所が東京の場合とか電話番号が070から始まる場合のパターンなど)をいくつも作成できる
- 入力パターンセットを好きに組み合わせて選択してフォームを埋めてくれる
逆に不要なものは、
- リッチなGUI
という感じ。
なので今回は入力パターンセットをまとめたJSONを指定して、それに則ってフォームを埋めてくれるようにした。開発者とか向けのデバッグでしか使わんだろうと思うしGUIは設けていない。
JSON一つあれば良いことのメリットとしては、チーム内で入力項目をまとめたJSONを作りgit管理とかしておけること。テキストファイル一つにまとめられるので共有が楽なのは良い。まぁJSONを作るのがだるいのだけども...
Chrome Extensionを作り始める際のボイラープレートとしてはchibat/chrome-extension-typescript-starterを使った。
過去にいくつか作ったことはあったので基本的な開発の流れは覚えていたが細かい部分を忘れていたのでAPI Docsと睨めっこしたりした。
ChromeでしかもPCでしか動かさなくて良いから考えるべき動作環境が限定的でその辺りは楽。
あとストアへのリリースはまだしてない。一旦は雑な作りだし、リポジトリとして公開しておけばそれをビルドして自前の環境で使うこともできるので後回しにしている。開発者向けなのでなおさら。
ちなみにこのExtensionはよくある住所などの自動入力のためのExtension(AutoFillみたいなやつ)ではない。
あくまで複数の入力パターンを何度も実行するようなケースでしか嬉しくない。その辺りは理解しておいてほしい。
おすすめ