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

Question

我正在尝试编写一个脚本，允许我通过 chrome 扩展将按钮插入网页的文本字段。我想做的是类似于 chrome 扩展 Last Pass 所做的事情，即insert a button into the login fields of username and password。我使用了我找到的here 的解决方案，代码示例如下：

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

这是该代码的result。有没有一种解决方案可以让我将按钮插入该字段。我对这一切都很陌生，因此非常感谢任何帮助。

我现在也更改了 css 文件中的类名。

Answer 1

这只是一个 css 问题，有很多方法可以“将按钮放在输入字段内”。在此之前你最好学习一些 css 知识。

一种简单的方法是将margin-left: -50px; 添加到您的 css 文件中，像素大小由您决定，并且不要忘记修改您的代码以确保您的按钮使用正确的类（您只需使用“inputFieldButton”作为类名，但在 css 文件中它是“inputButton”）