使用chrome扩展(HTML、CSS、JavaScript）向输入字段添加可点击的图标/按钮

我正在尝试编写一个脚本，该脚本允许我通过chrome扩展将按钮插入到网页的文本字段中。我想做的是与chrome扩展Last Pass类似的事情，即在用户名和密码的登录字段中插入一个按钮。我使用了这个解决方案，我在这里找到了以下代码示例：

     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);        
       }
     }

但是代码只是将按钮附加到输入字段的末尾。这是我一直在为按钮使用的CSS代码：

    .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;
    }

这是该代码的结果。有没有一个解决方案可以让我将按钮插入字段中。我对这一切都很陌生，所以任何帮助都将不胜感激。

此外，我现在已经更改了css文件中的类名。