逆向代码制作网页插件时，如何找到某个元素接收到事件时调用了什么函数？

Question

当我决定尝试修改第 3 方网站的浏览器插件时，我运行经常遇到这个问题，假设我想为视频网站制作一个简单的自动播放插件'具有自动播放功能。我知道有一个 UI 元素会触发播放视频的内部函数，但我不知道如何通过检查控制台中的元素来识别该函数。

我可以使用哪些技巧/方法来手动触发该功能，而无需用户实际单击该元素？

Answer 1

在 Chrome 开发工具中，我认为您可以在触发事件时添加一个断点，这可能允许您找到第 3 方调用的函数，或者您可以使用以下代码模拟点击事件MDN:

function simulateClick() {
  var event = new MouseEvent('click', {
    view: window,
    bubbles: true,
    cancelable: true
  });
  var cb = document.getElementById('checkbox'); 
  var cancelled = !cb.dispatchEvent(event);
  if (cancelled) {
    // A handler called preventDefault.
    alert("cancelled");
  } else {
    // None of the handlers called preventDefault.
    alert("not cancelled");
  }
}

有关详细信息，请参阅 MDN。

Answer 2

如果您知道点击某处的按钮或元素会导致视频播放，通常只需在该按钮上调用 .click() 即可。

将鼠标悬停在具有该功能的元素上，右键单击并在该点进行检查，开发人员控制台的元素面板应该会将您带到鼠标悬停的元素上。想出一个选择器或进程来唯一标识元素，然后.click()它，eg

document.querySelector('.video-container .play-button').click();

您可能还需要先等待在 DOM 中创建视频容器/播放按钮，在这种情况下，您可以使用 MutationObserver 或 setInterval 等待网站准备就绪。

另一种更棘手的方法是，在检查元素时，转到“事件侦听器”面板，并查找附加到单击/鼠标按下（等）事件的侦听器。有时，这些函数可以从全局范围调用，在这种情况下，您可以直接调用这些函数，而不是单击元素。

如果函数不是可从全局范围调用的，无论如何获取对它的引用的 hacky 方法是在页面加载之前对 monkeypatch addEventListener，监听你想要的监听器何时被附加，然后调用传递的函数。（但如果可能的话，早期的方法要简单得多，更可取）

逆向代码制作网页插件时，如何找到某个元素接收到事件时调用了什么函数？

When reverse engineering code to make a web page plugin, how can I find what function is called when a certain element receives an event?

javascript

reverse-engineering