2022/09/01〜世界旅暮らし中 旅経路はこちら

Chrome拡張機能 フォーム自動入力の方法 【AUTOFILL】

form_input
  • URLをコピーしました!

こんにちは。菜笑[なえ] (@nae310_)です。

今回はGoogleChromeの拡張機能 【AUTOFILL】についてです。
この拡張機能があればフォームの自動入力を行なってくれます。

以前こちらのJavaScriptを使った自動入力の方法を紹介しました。

あわせて読みたい
JavaScriptでフォームの自動入力を実現する!テスト時の面倒な入力とおさらば! こんにちは。菜笑なえです。 JavaScriptでフォームの自動入力を実現する方法について書いていきます。 テスト時に何度も同じ項目を入力することに疲れている方は必見で...

ですが拡張機能を使う方が手軽で便利ですね。

今回は以下の順番で解説していきます。

  • AUTOFILLのインストール方法
  • AUTOFILLの使い方
  • おわりに
目次

AUTOFILLのインストール方法

Chromeの拡張機能を使ったことある方は、特に問題ないかと思います。

まずは、こちらのページにアクセスしてください。
Autofill

Chromeに追加をクリック。

拡張機能追加をクリック。

右上にカミナリマークが表示されたらOKです。

AUTOFILLの使い方

データの保存方法

フォームのあるページを開いたら、右上にあるカミナリマークが黄色くなります。

もし黄色になっていなければ、ページを再読み込みしてみてください。

フォームの保存したいデータを入力して、カミナリマークをクリックします。
そうすると、ページ上部にこんなバーが表示されます。

③Generate Autofill Rules のボタンをクリックしてください。
Done と表示されたら保存されています。

本当に保存されているか確認するために、一度ページを離れて、もう一度今のページにアクセスしてみてください。

すでに先ほど入力した値がフォームに入力された状態になっているはずです。

また、カミナリマークにも今開いているページで使用できるデータの数が表示されるようになります。

保存データの更新方法

値の内容を書き換えたい場合は、もう一度カミナリマークを押してデータを保存すれば既存のデータが更新されます。

もしくはAUTOFILLのオプションからデータを編集することもできます。

オプションを開くためにはカミナリマークを右クリックして、オプションの項目を選択してください。

そしてこのページが開いたら「Value」という部分の内容を書き換えればOKです。

おわりに

テストなどで何度もフォーム入力をする場合は、本当に助かる拡張機能です。
今回は全てテキストボックスでしたが、セレクト・チェックボックス・ラジオボタンなどにも対応しています。

以前のJavaScriptのものだと、使うまでに毎回準備しないといけなかったので、こちらの方が簡単に使えますね!

ただ保存したデータはローカルのハードディスク内に保存されますが、暗号化されているわけではありません。
なのでメールアドレス、クレジットカード番号など個人情報に関わるもは注意しておきましょう!

誰かにPCを貸したりしたときに、全部情報見えてしまうなんてことにもなりかねないですからね。
もう使わなくなったデータは、こまめに削除しておいた方が良さそうですね。

SNS

Twitter:@nae310_
Instagram:310nae

form_input

この記事が気に入ったら
いいねしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次