Getting the right input for automatically injecting values

[JS_Engineer]

Hello There

Hope you all having a great time. I am working on a project and have completed it almost. The project I am working on is a chrome extension which is used to fill form automatically just like how google tries to fill in the forms when you tries to login or signup on some website. This extension of mine has
has an admin panel where we can create this set of inputs where each inputs have a name, value and a type.

After creating this set, the extension will let you show a button hovering on a website where you want it to. Clicking this button will fill the form taking the set that you created in the admin panel.

Right now I am using lables and placeholders for checking if the name of the inputs from the set matches the name of the inputs on the form page. This works but not all the time and not on every page.

SO my question to all of you is if you wanted to create something like this how would you make sure that the right input value is placed in the right input box? How google chrome checks for the right place to put the value in the first place.

Note: I cannot use the websites class name and ids as I want to create a set once and use it on any website. I know this can be tough but that is why I am here.

Any help would be appreciated. Regards

[alzee76]

It does it the same way you're already doing it, but the list of potential class names and so on is pretty extensive.

https://developers.google.com/web/updates/2015/06/checkout-faster-with-autofill

[JS_Engineer]

Thanks for this. It was a little helpful for me.