如何自动填写简单的表单并在 JavaScript 中单击提交以获取 chrome 扩展答案

【问题标题】：How to automate filling a simple form and clicking submit in JavaScript for a chrome extension如何自动填写简单的表单并在 JavaScript 中单击提交以获取 chrome 扩展
【发布时间】：2017-02-05 11:44:59
【问题描述】：

几天来一直在尝试这样做，但失败了，并且已经搜索了示例，但还没有找到有用的示例。

我想通过填写详细信息并以编程方式单击提交来浏览网页。

页面如下：

<form method='post' action='login.php'>
    <table>
        <tr>
        <td>Email Address: </td>
        <td ><input type='Text' size='30' name='email'></td>
        </tr><tr>
        <td>Password: </td>
        <td ><input type='password' size='30' name='password'></td>
        </tr><tr>
        <td colspan=2>&nbsp;</td>
        </tr><tr>
        <td>&nbsp;</td>
        <td  align='left'><input type='Submit' value='Log in'></td>
        </tr>
        <td colspan=2>&nbsp;</td>
        <tr><td colspan=2><hr></td></tr>
    </table>
</form>

我无法更改上述现有网页，因此想在用 JavaScript 编写的 chrome 扩展中包含代码，以便在我无法通过登录页面时节省大量时间！

我在遥远的过去曾经是一名程序员，但还没有完全精通 JavaScript 语法..

我的一个问题是表单似乎没有 ID。

有人可以帮忙吗？

到目前为止，感谢您的帮助，但我仍在苦苦挣扎，因此添加了更多详细信息。过去，我曾设法在 IE 中使用 VB（来自 Excel 宏）使用：

    Sub PressSubmit(IE)
    With IE.Document
    Set elems = .getElementsByTagName("input")
    For Each e In elems
        If (e.getAttribute("value") = "Log in") Then
            e.Click
            Exit For
        End If
    Next e

IE.Document.all("email").Value = "me@email.address"
IE.Document.all("password").Value = "myPassword"
Call PressSubmit(IE)

但是现在我需要在 Chrome 上做同样的事情，我正在努力使用 JavaScript 语法，这对我来说是新的，有没有人可以给我一个 JavaScript 版本或更好的版本，我可以通过示例学习?

【问题讨论】：

“我的一个问题是表单似乎没有 ID” 您可以使用 document.forms 以 HTMLCollection 检索 document 中的所有表单
感谢您的提示 - 我正在寻找...在我的示例中，您将如何使用它？
定义一个引用document.forms的变量，迭代集合并为document中每个form中的元素设置值
嗨 Guest271314 感谢您到目前为止的帮助，但我仍在努力使用 Javascript，这是一个需要熟悉的大量领域 - 我希望有一些示例代码，我可以查看并尝试。我更新了我的问题，详细说明了我过去所做的事情。

标签： javascript html forms google-chrome automation

【解决方案1】：

您可以使用document.querySelector()、Element.querySelector()、attribute selectors to set values atelements, call.click()onelement to submit`

<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <form method='post' action='login.php'>
    <table>
      <tr>
        <td>Email Address: </td>
        <td>
          <input type='Text' size='30' name='email'>
        </td>
      </tr>
      <tr>
        <td>Password: </td>
        <td>
          <input type='password' size='30' name='password'>
        </td>
      </tr>
      <tr>
        <td colspan=2>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td align='left'>
          <input type='submit' value='Log in'>
        </td>
      </tr>
      <tr>
        <td colspan=2>&nbsp;</td>
      </tr>
      <tr>
        <td colspan=2>
          <hr>
        </td>
      </tr>
    </table>
  </form>
  <script>
  var form = document.querySelector("form[action='login.php']");
  var submit = form.querySelector("input[type='submit'][value='Log in']");
  if (submit.length) {  
    form.querySelector("input[name='email']").value = "me@email.address";
    form.querySelector("input[type='password']").value = "myPassword";
    submit.click();
  }
  </script>
</body>

</html>

【讨论】：

您好 guest271314，非常感谢您在这方面的持续帮助。我可能做错了什么，但似乎无法让它发挥作用。在上面的代码块中，我在 If 语句之前和之后的脚本中插入了警告行，并且 if 语句中的警告永远不会执行。在 chrome 中打开时。