Highlight Form Fields with a Tampermonkey Userscript

Preface

When purchasing a VPS, you often run into pages that require you to fill in personal information.

We usually look for a webpage that generates random American identity info.

I had an idea: I wanted a quick and easy way to know which piece of info goes into which field.

Developing With GPT

Suppose there's an HTML page like this.
The page may contain the text "first name", or the placeholder attribute of an input element may contain "first name".
I need to find and highlight these "first name" occurrences.

I sent these requirements to GPT.

The result GPT generated was split into two parts: a CSS snippet and a JS script.

So I made another request to GPT

I need it consolidated into a JS file that can be run in the browser's console.

GPT generated a consolidated JS file.

I tested it in the Console of the browser's F12 developer tools.

On the RackNerd registration page, the effect is a red border.

On the American identity info page, the effect is a yellow text background.

* Note: on this page, the text reads Firstname rather than First name. The code needs a small tweak.

On some American identity info pages, there is no Firstname-like text — only Full name.

So I continued giving GPT modification feedback.

Group first name, firstname, full name, fullname, 全名, 姓名 into one category — display the same highlight color or border color.
For keywords within the same category, the border color and text background color should be consistent.

I tested it, and the result looked good.

Next, I extended the result to cover other info fields and requested that different categories use different colors.

Group first name, firstname, last name, lastname, full name, fullname, 全名, 姓名 into one category — display the same highlight color or border color.
Group phone number, phone, 电话 into one category.
Group street address, street, 街道地址, 街道 into one category.
Group city, 城市 into one category.
Group full state name, state, 州全称, 州 into one category.
Group postcode, zip code, 邮编 into one category.
For each of the categories above, use a unique, vivid color that does not match any other category.

I tested the result GPT returned in the browser console.

The effect was great.