javascript - 在用户与窗口交互之前，Tampermonkey 脚本点击事件什么都不做

Question

我正在尝试解决自动登录到 https://account.booking.com/sign-in 的脚本中的错误。

function clickButton (){
  const msg = document.querySelector(".bui-form__error");
  const button = document.querySelector(".bui-button");
  if (msg && msg.id !== "loginname-error" ) {
    console.log(msg.textContent);
  } else if (button) {
    button.click();
  } else {
    console.log("Not yet...");
    return;
  }
}

setInterval(clickButton, 200);

大多数时候，这工作正常。尽管 Chrome 会自动填写用户名字段，但它有时会显示登录名错误，出于我们的目的我们可以安全地忽略它——但是，这有时会导致页面由于某种原因变得对脚本无响应。用户在页面上所做的几乎任何事情都会导致脚本继续——按 F12 打开 Dom 检查器，单击页面上的任何地方，甚至在控制台上运行命令(就像 'a = document. querySelector...') 所有这些都以某种方式使脚本正常运行。

我试图关注 previous answers ，实现了 triggerMouseEvent 并运行 mouseover、mousedown、mouseup 和 click。这与简单地使用 click() 没有什么不同。由于单击页面上的其他位置可以修复它，因此我尝试在其他元素上使用此类单击事件，然后再次在按钮上使用它们；这与简单地使用 click() 的行为也没有什么不同。我看到的 Tampermonkey 脚本“在...之后工作”的唯一结果是页面重新加载的 AJAX 问题，而不是用户与窗口的交互。

在点击事件之后放置 console.log("click") 表明它很好地到达了点击事件。使用 triggerMouseEvent，我记录了 dispatchEvent，如下所示:

function triggerMouseEvent (node, eventType) {
    var clickEvent = document.createEvent ('MouseEvents');
    clickEvent.initEvent (eventType, true, true);
    console.log(node.dispatchEvent (clickEvent));
}

按预期返回“true”。

我试图在每次点击之间发送如下键盘事件:

function pressf12(){
  var event = new KeyboardEvent("pressF12");
  event.keyCode = 123;
  event.which   = 123;
  event.altKey  = false;
  event.ctrlKey = false;
  event.shiftKey= false;
  event.target  = window;
  window.dispatchEvent(event);
}

这也没有奏效。我完全不知道是什么导致了这个问题，也不知道可以做些什么来解决这个问题。

这是加载页面后在控制台上显示的内容，如果相关的话:

[Report Only] Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src saa.booking.com *.bstatic.com bstatic.com google-analytics.com 'self' 'nonce-6B8EKlfK9vqB8Uy'". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution.

content_script @ VM1347:61 (anonymous) @ VM1347:71

和

sign-in?op_token=...:38 POST https://account.booking.com/navigation_times?sid=&pid=...&nts=…=3&lang=en-us&ref_action=Signin_Index&aid=...&stype=&route=&ua=&ch=&lt= net::ERR_BLOCKED_BY_CLIENT callback @ sign-in?op_token=...:38 wrapper @ error_catcher:756 setTimeout (async)
win.setTimeout @ error_catcher:666 callback @ sign-in?op_token=...:38 load (async)
nav_timing @ sign-in?op_token=...:38 (anonymous) @ sign-in?op_token=...:38

截图如下:

用户点击页面后不会显示更多消息。即使我将间隔增加到 5000，在页面加载并且这两条消息都自行显示后，脚本中的点击也不会执行任何操作。

我想到这可能是由 Chrome 设置、插件等引起的，但它发生在我自己的多台计算机以及其他用户的计算机上。即使是这种情况，也需要一些解决方法。

我还想到，这可能与TM的沙箱有某种关系。尝试 @grant none、@grant unsafeWindow，并根据 this answer 插入内联脚本都有相同的问题行为。插入内联脚本确实会在控制台中产生更多的不安全内联错误。

Answer 1

在注册一个虚拟帐户后，我在 Chrome 中使用 Tampermonkey 和 Firefox 中使用 Greasemonkey 尝试了您的脚本。 setInterval 延迟为 200 时，它们不起作用。您需要将 setInterval 延迟增加到 1000，它才会起作用。