Auto Form Filler

About

# 📝 自動フォーム入力 Chrome 拡張機能

## 📄 概要

この Chrome 拡張機能は、ウェブページ上のフォームを自動的に入力するように設計されています。<br>
キーワードマッチング機能によって、各フォームフィールドの種類を特定し、適切なデータで入力します。<br>
ユーザーは、カスタムプロファイルを保存およびロードして、好みのデータでフォームを素早く入力することもできます。

## 📑 機能

-   **自動フォーム入力:** フィールドラベル、ID、および名前に基づいてフォームフィールドを自動的に入力します。
-   **カスタムプロファイル:** 異なるフォーム入力シナリオ用にカスタムプロファイルを保存およびロードできます。
-   **ダミーテキスト生成:** 指定された長さのダミーテキストをテキストエリアに生成します。

### ⏬ 入力フロー

1. プロファイルに入力がある、かつ、`FIELD_KEYWORDS`の値に`name,id,label,type`のいずれか部分一致した値があれば入力されます
2. プロファイルに入力がない場合はフォーム要素から以下の順でテキストを取得して入力されます
    1. `type="tel"`の場合は`000-0000-0000`
    2. `type="email"`の場合は`[email protected]`
    3. `type="date"`の場合は今日の日付
    4. `label[for="id"]`
    5. 親素要素の label
    6. 兄弟要素
    7. placeholder
3. `type="checkbox"`は全てチェックされます
4. `type="radio"`は選択肢最後の radio がチェックされます
5. `<select></select>`は選択肢最後の option が選択されます
6. `<textarea></textarea>`はプロファイルで設定した文字数のダミーテキストが入力されます
    - プロファイルに設定がない場合は 500 文字がデフォルトで入力されます

### ⭕️ 想定している HTML 構造

以下の構造に該当する場合にキーワードとマッチングする要素を特定します

::: label の `for属性`と input の`id`が同一である

```html
<div>
    <label for="your-mail">メールアドレス</label>
    <input id="your-mail" />
</div>
```

::: label で囲まれたテキストと input である(3 階層まで親要素を辿って追跡)

```html
<label>
    <div>
        <span>メールアドレス</span>
    </div>
    <div>
        <div>
            <input />
        </div>
    </div>
</label>
```

::: input より先行している兄弟要素がある('label, div, span, p, h1, h2, h3, h4, h5, h6, small')

```html
<div>
    <span>メールアドレス</span>
    <input />
</div>
```

::: input に正しく`placeholder`が設定されている

```html
<input placeholder="例）[email protected]" />
```

#### 📨 メールアドレスと電話番号について

上記の方法で特定した input が

-   `type="mail"`
-   `type="tel"`

で、かつ**プロファイルに設定がない**場合は、それぞれ

-   `[email protected]`
-   `000-0000-0000`

が入力されます

### ❌ 対応できない HTML 構造

以下の構造に該当する場合は想定されないテキストが入力される場合がございます。

::: 一つのラベルに対して複数の input がある

```html
<div>
    <label>郵便番号</label>
    <input />
    <input />
</div>
```

::: フロントに見えないラベルテキストが兄弟要素にある場合

```html
<dl>
    <div>
        <dt>ふりがな</dt>
        <dd>
            <span style="visibility: hidden;">名前のふりがな</span>
            <input />
        </dd>
    </div>
</dl>
```

::: その他

-   `label`がない
-   `for属性`と`id`が紐づいていない
-   `placeholder`がない

などはフォームの構造として不適切なので、<br>
入力されない項目があった場合は、構築方法から見直すことも推奨します

## 🙇‍♂️ 免責事項

-   エンジニア、テスター、開発者向けツールです。営業での使用は想定されておりません。
-   この拡張機能を使用して起きた不具合や損害については一切の責任を負いませんので自己責任でご利用ください。