I'm trying to write a script that will allow me to insert a button into the text field of a web page through a chrome extension. What I want to do is something similiar to what the chrome extension Last Pass does i.e. insert a button into the login fields of username and password. I have used this solution that I found here with the following code example:
var forms = document.getElementsByTagName('form');
for (var i = 0; i < forms.length; i++) {
var form = forms[i];
var inputs = form.querySelectorAll("input[type=text]");
for (var j = 0; j < inputs.length; j++) {
var input = inputs[j];
button.className = "inputFieldButton";
input.parentNode.insertBefore(button, input.nextSibling);
}
}
but the code just appends the button to the end of the input field. Here's my CSS code that I've been using for the button:
.inputFieldButton{
display: inline;
padding-right: 50px
background-image: url("/images/buttonInputField.png");
cursor: pointer;
position:relative;
background-attachment: scroll;
background-size: 16px 18px;
background-position: 98% 50%;
background-repeat: no-repeat;
}
This is the result of that code. Is there a solution that lets me insert the button into the field. I'm pretty new to all of this so any help would be very much appreciated.
Also I've changed the classname in the css file now.