尝试自动化网站登录，使用 Chrome 扩展 MV3 和 vanilla Javascript 来显示带有占位符的用户名/密码登录

Question

我在这个个人项目中通过在 MV3 下开发 Chrome 扩展来自动化跨两个不同网站的相对复杂的工作流程；这包括网站交互，以及 Dropbox 和 GoogleSheets 读写交互。

我已经成功完成了我的第一个网站的完整工作流程（即登录网站、浏览不同页面、同时与不同的动态 DOM 元素交互以输入信息、下载、上传、复制文件以及将文件移至 Dropbox，更新我的 Google 表格等）

我现在需要与第二个网站进行交互，但我坚持认为应该不是问题：只需登录该网站即可。

第二个站点的登录页面see看起来很标准；它呈现一个表单（ID为“UsernameAndPassword”），包括两个输入字段（ID为“用户名”和“密码”）和一个按钮（ID为“loginFormUsernameAndPasswordButton”）

但是，输入字段默认显示某种占位符字符串值，即“电子邮件”和“Mot de passe”。

通过人机交互，实际单击表单字段会清除默认值，然后您可以输入您的信息并成功单击“登录”按钮表单。

我知道可以自动化此登录流程，因为我使用 Roboform 密码管理器，并且它可以毫不费力地登录到该网站。

但是，

当我使用 document.getElementById("username").value = "dummyusername") 和 document.getElementById("username").value = "dummypassword") 在 chrome 扩展内容脚本中设置这些字段时，这些设置值确实出现但有点“覆盖”在默认占位符之上（即，默认占位符和我设置的值都是可见的）；

这就是 de DevTools 控制台的样子

如果我随后使用 document.getElementById("loginFormUsernameAndPasswordButton").click() 触发表单按钮上的单击操作，我使用脚本设置的那些值将被清除，并且我会收到与用户名的情况相对应的错误消息/密码字段为空（就好像我没有设置它们一样）。

我也尝试过首先将焦点设置到这些字段，但似乎没有任何区别。

你们能帮忙或指点一下如何处理这个问题吗？预先感谢您！

Answer 1

wOxxOm 在他的评论中的指针（使用已弃用的 document.execCommand 并检查这个example）确实解决了我的问题。

我不知道如何接受您的评论作为答案或正确感谢您的帮助，因此我将发布作为答案，感谢您的帮助，我为解决问题所做的事情。

事实上，我确实需要更多地感谢您，因为我相信在过去的几个月里，通过分析您的提示、解释和/或示例提示，我一定已经解决了我个人项目中大约 80% 的最困难的情况。

这就是我的情况下设置这些输入字段的方法：

let userid = "myuserid"
let password = "mypassword"
document.getElementById("userid").focus()
document.execCommand('insertText', false, userid)
document.getElementById("password").focus()
document.execCommand('insertText', false, password)
document.getElementById("login_button").click()