如何向google表单添加事件监听器

Question

我正在开发一个供我个人使用的扩展。它将存储我在谷歌表单中填写的信息。

我面临的问题是谷歌表单中的提交按钮实际上是一个带有嵌套元素的跨度，并且实际上没有特定的按钮标签。

另外我无法拦截提交事件

以下代码不起作用

let forms = document.getElementsByTagName("form");
forms[0].addEventListener("submit", (ev) => {
   ev.preventDefault();

   // Store data locally using FormData

   // submit form after storing data only if form accepted the data

});

在控制台中运行此命令后，单击按钮时不会触发事件侦听器。

如何向 Google 表单提交或下一步按钮添加提交事件？

我尝试使用 PreventDefault 并在处理程序函数中返回 false，但在按下提交按钮时仍然无法阻止表单提交。

Answer 1

Google Forms 上的事件处理程序通过

jsaction 属性与 JsAction

 绑定。按钮的父容器看起来像这样：

<div
  role="button"
  class="uArJ5e UQuaGc Y5sE8d VkkpIf QvWxOd M9Bg4d"
  jscontroller="VXdfxd"
  jsaction="click:cOuCgd; mousedown:UX7yZ; mouseup:lbsD7e; mouseenter:tfO1Yc; mouseleave:JywGue;touchstart:p6p2H; touchmove:FwuNnf; touchend:yfqBxc(preventDefault=true); touchcancel:JMtRjd;focus:AHmuwe; blur:O22p3e; contextmenu:mg9Pef;"
  aria-label="Submit"
></div>

您可以克隆按钮元素以获取看起来相似但没有任何先前附加的事件处理程序的节点，并清除

jsaction

 属性以阻止框架重新注册它们。

const submitElement = document.querySelector('[role=button][aria-label=Submit]')

if (submitElement && submitElement.parentNode) {
  const interceptedButton = submitElement.cloneNode(true)
  interceptedButton.setAttribute('jsaction', '')
  submitElement.parentNode.replaceChild(interceptedButton, submitElement)

  interceptedButton.addEventListener("click", ev => {
    ev.preventDefault()
    alert("Click intercepted.")
  });
}

[aria-label=Submit]

属性选择器适用于所有区域设置，因为只有按钮上的可见标签会随着用户的语言设置而变化。