フォーム開発のテストで、毎回同じデータを手入力していませんか？

「お名前」「フリガナ」「メールアドレス」「電話番号」「住所」...
確認画面に進んで戻って、また最初から入力...

正直、めちゃくちゃダルいですよね。

今回は、このストレスを解消するために自作したChrome拡張機能「Form Auto Filler」を紹介します。

    既存のフォーム自動入力拡張機能の問題点

    「フォーム 自動入力 Chrome拡張機能」で検索すると、いくつかのツールが見つかります。

    実際に試してみたところ...

    • 登録ボタンを押してもデータが消える
    • サービス自体が見つからない
    • 有料プランのみ
    • 開発者向けではない

    これらの多くは「営業目的のフォーム送信自動化」を想定しているようで、開発者がテストで使うには機能過剰だったり、逆に痒いところに手が届かなかったりします。

    私が欲しかったのはシンプルに：

    1. name属性を指定して値を登録
    2. ワンクリックで入力
    3. 複数パターンを切り替え可能

    これだけ。

    Form Auto Filler の特徴

    開発者のための設計

    この拡張機能は、フォームの name 属性をキーにして値を入力します。

    client[name]=手須　藤太郎
client[email1]=test@example.com
client[tel1]=08012345678

    一般向けの「フィールドを自動検出」するタイプではなく、開発者がname属性を把握している前提の設計です。

    そのため：

    • どのフィールドに何が入るか明確
    • フォーム構造が変わっても対応しやすい
    • バリデーションテストがしやすい（特定フィールドだけ空にする等）

    対応フィールド

    フィールドタイプ 記述例
    テキスト入力 client[name]=手須　藤太郎
    textarea client[comment]=フォームのテストです。
    select client[address1]=宮城県
    radio client[sex]=radio:0 （0番目を選択）
    checkbox（複数） client[media][]=checkbox:0,3 （0番目と3番目をチェック）
    checkbox（単体） policy=1 （チェックする）

    複数プリセット対応

    テストでは複数パターンのデータが必要になることがあります。

    • 通常のテストユーザー
    • 必須項目だけ入力したパターン
    • 住所が異なるパターン
    • 年齢や性別が異なるパターン

    Form Auto Fillerでは、これらをプリセットとして保存し、ワンクリックで切り替えられます。

    インストール方法

    Chrome Web Storeには公開していません（開発者向けツールなので）。
    手動でインストールします。

    1. リポジトリをダウンロード

    GitHub: https://github.com/sarap422/chrome-form-auto-filler

    「Code」→「Download ZIP」でダウンロードして解凍。

    または git clone:

    git clone https://github.com/sarap422/chrome-form-auto-filler.git

    2. Chrome拡張機能として読み込み

    1. Chromeで chrome://extensions/ を開く
    2. 右上の「デベロッパーモード」をONにする
    3. 「パッケージ化されていない拡張機能を読み込む」をクリック
    4. 解凍したフォルダを選択

    これでツールバーにアイコンが表示されます。

    使い方

    プリセットの作成

    1. 拡張機能アイコンをクリック
    2. 「+ 新規作成」をクリック
    3. セット名を入力（例：テストユーザー1）
    4. 入力データを name=value 形式で記述
    5. 「💾 保存」

    入力データの書き方

    1行に1フィールド、name=value 形式で記述します。

    # 基本情報
client[name]=手須　藤太郎
client[furigana]=テス　トウタロウ
client[age]=35

# メール（確認用も同じ値を入れる場合）
client[email1]=test@example.com
client[email2]=test@example.com

# 電話番号
client[tel1]=08012345678

# 住所
client[postcode]=8100021
client[address1]=福岡県
client[address2]=福岡市中央区今泉1-2-3
client[address3]=テストビル501

# select（値またはテキストで指定）
client[job]=会社員

# radio（インデックス指定）
client[sex]=radio:0
client[marital]=radio:1

# checkbox（複数選択）
client[media][]=checkbox:0,2,4

# 単体checkbox（同意チェックなど）
policy=1

# 自由記述
client[comment]=フォームテストです。

    # で始まる行はコメントとして無視されます。

    フォームへの入力

    1. テストしたいフォームページを開く
    2. 拡張機能アイコンをクリック
    3. 使いたいプリセットを選択
    4. 「▶ 入力実行」をクリック

    これだけで、該当するname属性を持つフィールドに値が入力されます。
    フォームに存在しないnameは無視されるので、複数フォームで同じプリセットを使い回せます。

    便利な機能

    エクスポート / インポート

    作成したプリセットはJSON形式でエクスポートできます。

    サンプルプリセット

    リポジトリに sample-presets.json が同梱されています。
    インポート機能で読み込めば、すぐにテストを開始できます。

    技術的な補足

    Manifest V3対応

    Chrome拡張機能の最新仕様であるManifest V3で作成しています。
    Manifest V2は2024年以降サポートが終了するため、長期的に使えます。

    入力イベントの発火

    値を入力するだけでなく、input イベントと change イベントを発火させています。

    element.value = value;
element.dispatchEvent(new Event('input', { bubbles: true }));
element.dispatchEvent(new Event('change', { bubbles: true }));

    これにより、JavaScriptでイベント監視しているフォーム（リアルタイムバリデーション等）でも正常に動作します。

    まとめ

    Form Auto Fillerは、フォーム開発のテスト効率を上げるための小さなツールです。

    • name属性ベースで確実に入力
    • 複数プリセットでパターン切り替え
    • エクスポート/インポートで共有可能
    • Manifest V3対応で長く使える

    「営業用の自動送信ツール」ではなく、開発者が開発者のために作ったテストツールです。
    フォームテストで、何度も何度もフォームに入力するのがめんどくさいという方は使ってみてください。

    GitHub: https://github.com/sarap422/chrome-form-auto-filler

    この記事がお役に立ちましたら、GitHubでStarをいただけると励みになります！