Webフォームの住所を自動入力できるChrome拡張機能を作ってみた

Webフォームの住所を 自動入力できる Chrome拡張機能を作ってみた @shiraily 白井 尊昭

自己紹介 仕事もプライベートも自動化。 仕事 Tsunagu.AI CTO フロントエンド開発のためのローコードサービス「FRONT-END.AI」 デザインデータからhtml/cssを生成してくれます プライベート ・個人のGoogleカレンダーに予定を登録すると、 会社のGoogleカレンダーに「ブロック」予定をつくる https://qiita.com/shiraily/items/738bf2f5fcf5e6040ec4 ・ポイ活（ポイント貯め）の自動化 2

• https://qiita.com/shiraily/items/738bf2f5fcf5e6040ec4

サマリ: 住所を1クリックで入力できるChrome拡張機能（ストア未公開） gif: https://gyazo.com/08bd160481799498fd3bb7d7fd4102a6 3

モチベーション: 各種Webサイトでの会員登録 / 住所変更が面倒 (っ'-')╮=͟͟͞ﾌﾞｫﾝ 4

モチベーション: 既存の自動入力機能で満足できない 例: Google Chromeの標準機能。 市区町村を入力できない、それ以外も正しく入力できないことが多い Chromeの住所設定 autofillの結果 5

原因: htmlのautocomplete属性の仕様に準拠していないフォームが多い (mdnより) autocomplete を使用すると、 ウェブ開発者は入力欄にどの種類の情報が期待されているかを ブラウザーに示唆する →主要ブラウザーもautocomplete属性の値を参照して入力してくれる 都道府県 <input autocomplete="address-level1" …> 市区町村や郡 <input autocomplete="address-level2" …> 市区町村や郡以降（住所を完全に区別できるもの） <input autocomplete="street-address" …> 参考: https://developer.mozilla.org/ja/docs/Web/HTML/Attributes/autocomplete 6

※autocomplete属性を正しくつけると自動入力結果が”改善”される Chromeの設定 市区町村は欄なし 参考: https://developer.mozilla.org/ja/docs/Web/HTML/Attributes/autocomplete autofillの結果 7

なので、いい感じに入力してくれるツールをつくる！！！ 要件 autocomplete属性に準拠していないフォームでも住所を自動入力できる ・ワンクリックで ・できるだけ多くのサイトで スコープ ・PCのGoogle Chrome →Chrome拡張機能を作ればいけそう ・まずは郵便番号と住所のみ。 ・ストア未公開です… →ローカルで簡単に設定 / ビルドできればOK 8

いい感じに入力 ＝ フォームの情報を使って入力内容を推定 <div> <p>郵便番号 (半角数字)</p> <div> <span> <label for=”postNoFirst1”> 上三桁 </label> <input type="text" name="postNoFirst" value="100" id="postNoFirst" /> … 手がかり ①タグの情報 tag名 属性値: id, name, type, placeholder, autocomplete ②labelタグのテキスト ③周辺のテキスト情報 ④その他周辺の情報 例: 郵便番号っぽい入力欄が 2つある→まずは3桁だ ※初回入力も想定しvalue値は使わない 9

（概略）Chrome拡張機能のつくり方 所定の構成にしたディレクトリを拡張機能としてChromeに読み込ませる ※TypeScriptで記述してコンパイルしてます pkg-dir ├── ├── ├── └── background.js: Service Worker content_scripts.js: DOMにアクセス icon.png manifest.json: メインの設定ファイル アイコンをクリックしたら イベント経由でDOM操作を発火 10

処理の流れ: DOM取得 → 情報抽出&フォーム分類 → フォーム入力 <div> <p>郵便番号 (半角数字)</p> <div> <span> <label for=”postNo1”> 上三桁 </label> <input type="text" name="postNo1" id="postNoFirst" /> … target1 tag = “input” 周辺テキスト = ”郵便番号 (半角数字)” label = 上三桁” name = “postNo1” score(郵便番号) = 100 score(郵便番号3桁) = 200 target2 tag = “input” … score(郵便番号) = 100 score(郵便番号4桁) = 200 user data <div> <p>郵便番号 (半角数字)</p> <div> <span> <label for=”postNo1”> 上三桁 </label> <input type="text" name="postNo1" value="100" id="postNoFirst" /> … 11

フォーム分類ロジックの考え方: スコア関数を定義する ✕ 条件分岐書きまくる ミニマルだが、たぶんすぐ記述が煩雑になって破綻 ✕ 機械学習 慣れてないし時間かかりそう（いつかやりたい！） ◯ スコア関数 条件分岐などで直接入力値を決めていくのではなく、 スコアを計算しハイスコアの値を入力 直感的にはしばらく耐えられそう （調整が難しくなったら、スコア計算を機械学習で置き換えられる） 12

いくつかの入力バリエーションに対応しています 文字種 ● 全角 / 半角 ○ ● 指定されていない限り半角で入力したい 郵便番号7桁のハイフンあり / なし フォームのUI起因 ● 「番地以降」という入力欄は「番地 + 建物 + 部屋番号」を埋める 13

自動入力できた例 autocomplete属性はないが、 labelタグがついていたので楽 14

できなかった例 霞が関1-4-1 丁番地とは🤔 15

さまざまなWebフォームを眺めた感想(T_T) ● 英語の間違い ○ ○ ● マークアップ〜 ○ ○ ● 大手サイトでも結構ある。。例: first nameとlast nameが逆 idやname属性よりも、日本語のlabel, placeholderや近くにある文字列を重視した formタグ使わずにtableタグのみ labelタグ使わない、labelのfor属性つけない（inputのidと紐付けられるやつ） そもそもフォームのUI設計が(ry ○ ○ 「全角〜文字で入力」キライ 電話や郵便番号の入力欄を分割せず、ハイフンはよしなにしてほしい。 デフォルトで自動入力機能を提供しているGoogle Chrome先生も困ってます。 16

Future work ● ● ● ● ● 設定画面つくる 精度向上 名前や電話番号などの入力に対応 ドロップダウンなども表示して入力をサポート Chromeウェブストアで公開 ○ ● 機械学習を取り入れる ○ ● 住所などの情報を安全に保管する仕組みが必要かも 人手でスコアリング関数書くのしんどい ネイティブアプリの入力フォームへ対応 ○ 自動入力アプリの開発が必要 17

まとめ ● 自動入力するChrome 拡張機能をつくってみた ● autocomplete属性に対応していないWebサイトが多い ○ 対応していてもGoogle Chromeは市区町村を入力できない ● フォームの情報を使ってスコアを計算し、入力内容を決定した ● 設定画面をつくったり、名前などの入力にも対応したい ● リポジトリ ○ https://github.com/shiraily/smart-autofill （コードめちゃ汚いけど） 18

• https://github.com/shiraily/smart-autofill

おわり 19

Chrome拡張機能のストレージにセンシティブな情報は保存すべきでない? 拡張機能が使えるストレージ chrome.storage API ● ● localStorage APIのように利用できる > Confidential user information should not be stored! The storage area isn't encrypted. 代替策 ● ● 個人の責任で、HDDなどが暗号化されていれば良しとする Web API経由で取得 ○ ● Webサービス作ってAPI提供 ローカルのデスクトップアプリから取得？（詳細不明） ○ 1passwordは一部連携してそう 20

• https://developer.chrome.com/docs/extensions/reference/storage/

スマートフォンでの自動入力にはアプリ開発が必要 ・1passwordなどのイメージ ・結構たいへんそう ・参考: 自動入力サービスの作成 21

• https://developer.android.com/guide/topics/text/autofill-services?hl=ja

行政レベルでの改善にも期待 引越しワンストップサービスの推進: https://cio.go.jp/onestop-hikkoshi 22

• https://cio.go.jp/onestop-hikkoshi