Highlight Form Fields with a Tampermonkey Userscript
Preface
When purchasing a VPS, there are times when you need to fill in personal information.
We often look for a web page that generates random American information.
I had an idea: I wanted to quickly and easily know which piece of information goes where.
GPT-Oriented Development
There is an HTML page like this
The page may contain "first name", or it may contain "first name" in the placeholder attribute of the input element
I need to find and highlight these "first name"s
Send these requirements to GPT.
The result generated by GPT was split into two parts: CSS and JS script.
So I made another request to GPT
Need to be integrated into a js file that can be executed in the browser's console
GPT generated an integrated JS file.
Test it in the Console of the browser's F12 Developer Tools.
For the RackNerd registration page, the effect is a red border.
* Note: on this page, it shows Firstname instead of First name. The code needs a small modification.
On some American information pages, there is no content like Firstname, only Full name
So we continued to send modification suggestions to GPT.
Group first name, firstname, full name, fullname, 全名, 姓名 into one category, displaying the same highlight color or border color.
For the same category of keywords, the border color and text background color should be consistent.
Tested, and the result works.
Next, extend this result to other information, and require different categories of information to use different colors.
Group first name, firstname, last name, lastname, full name, fullname, 全名, 姓名 into one category, displaying 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.
Each of the above categories must use a unique and distinct color, and should not share the same color with any other category.
Test the result returned by GPT in the browser console.
The effect is good.
Fixing the Effect of This Script with a Userscript Plugin
Specific detailed steps are omitted.
Userscript plugin
The script file name should be xxx.user.js
@include *://*/* matches all pages
For the code developed by GPT, fill the function body below // You code here ...
Upload to GitHub
https://github.com/crazypeace/high-light-contact-infoDemo Video
========
Postscript
The GPT used in this process is
========
Posts
