自前入力補完

Sat, Jun 26, 2021

Read in 1 minutes

自作Chrome拡張機能:自前入力補完について

自前入力補完

WEBの画面の入力内容を保存しておき、再度画面を開いた時に入力の手間を省くChrome 拡張機能です。
日々同じような内容を入力するシステム(日報など)や、WEBシステム開発のテストでの利用を想定しています。

入力内容の保存は画面全体だけでなく、
特定の項目だけを選んで保存することもできます。

入力内容を保存する拡張機能は既存のものがあるのですが、
自身に合うものが見つからなかったので自分の考えるシンプルなものを自作した次第です。

インストール方法

Chromeブラウザでこちらのサイトを訪れてください。
Chrome ウェブストア - 自前入力補完 -

「Chromeに追加」をクリックしてください。

Chromeに追加

Chromeの右上のパズルピースのようなマークをクリックしてください。
「自前入力補完」のピンマークをクリックすると、アイコンがChromeに追加されます。

インストールした拡張をバーに追加
ピンマークをクリック

使い方

項目を選択して保存する

Chromeブラウザで入力項目がある画面を開きます。

URLの右横にある、自前入力補完のアイコンをクリックします。
または、パズルピースのようなアイコンをクリックして自前入力補完をクリックします。

ポップアップを開く

ポップアップが出るので「選択した項目から」をクリックします。

選択モードに

それから、
画面の入力項目のうち、入力内容を保存したものををクリックしていきます。
(この時、ポップアップを一旦閉じてしまっても問題ありません。)
クリックした項目は背景色が青くなります。

保存したい項目を選択

なお、ラジオボタンやチェックボックスはクリックすると右横に青いハートマークがつきます。

ラジオやチェックボックスの選択状態

選択し終わったら、ポップアップをもう一度開きます。
タイトルの入力欄が出てるので、好きなタイトルを入力して保存します。

タイトルを入力して保存

保存する時、
「現在のURLに対して」を選ぶと、このページでだけ使える入力値として保存できます。
「サイト全体に対して」を選ぶと、このサイト内であればどのページでも使える入力値として保存できます。
例)
本サイトであれば、
https://labo.pottiri.tech/
から始めるページであればどこでも利用できるようになります。

全ての項目を保存する

自前入力補完のアイコンをクリックし、ポップアップを開きます。
「全ての項目から」をクリックすると、
タイトルの入力欄が出るので、好きなタイトルを入力して保存します。

「全ての項目から」は画面上の入力項目を全て保存するので余分なものまで保存しがちになります。
後述のオプション画面で余分な項目を削除することをお勧めします。

保存した項目を展開する

Chromeブラウザで画面を開きます。

自前入力補完のアイコンをクリックし、ポップアップを開きます。

すでに入力内容を保存していれば、
「保存しておいた入力値を展開」の下に選択肢が出ます。
展開したい内容を選んで「展開」ボタンをクリックします。

展開

入力内容が展開された項目が青くなります。
青色は5秒程度すると消えます。

オプションページで入力を編集する

自前入力補完のアイコンをクリックし、ポップアップを開きます。
下の方にある「オプションページ」のリンクをクリックします。

オプションページへ

オプションページが開きます。
このページでは、保存した内容を編集することができます。
URLと保存時に入力したタイトルを選ぶと、
内容が一覧表示されるので編集してください。

オプションページで編集

現状、削除と値の編集のみができます。

保存対象

HTMLで実現できる入力項目の内、下記のものが保存対象です。
パスワード<input type="password">は保存しません。

text search tel url email
datetime-local date month week time
number range color radio checkbox

select

textarea

お試しフォーム

お試し用のフォームです。
こちらを使用して入力内容が保存できること、
保存した内容が保存できることをお試しください。

Radio
Checkbox