无法使用 Chrome 扩展程序单击按钮，但我可以在开发人员工具中单击

Can't click a button using a Chrome extension, but I can in the developer tools

本文关键字：单击 我可以 开发 工具 按钮 Chrome 扩展 程序      更新时间：2023-09-26

我正在尝试创建一个Chrome扩展程序，其唯一目的是单击YouTube视频的"喜欢"按钮。然后，我可以将扩展名映射到快捷键，然后按Alt-L或其他键来喜欢视频。

我使用开发人员工具找到了按钮的 XPath。

因此，我在扩展中用于单击按钮的JavaScript代码是这样的：

var btn = document.evaluate('//*[@id="watch8-sentiment-actions"]/span/span[1]/button',document, 
    null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null).snapshotItem(0);
console.log(btn);
console.log("About to click like");
btn.click();
console.log("Just clicked like");

document.evaluate()实际上找到了按钮。在Chrome开发人员工具的控制台中，我看到输出：

<button (all the other button details are printed)...>...</button>
About to click like
Just clicked like

但是，它实际上并没有单击该按钮。

但是，如果我在开发人员工具的控制台中执行完全相同的代码，它实际上会单击该按钮。

有人知道为什么它可以在开发人员工具的控制台中工作，但不能在扩展中工作？

此外，我还下载了一个名为Custom JavaScript for Sites的扩展，它将JavaScript代码注入网站。我得到的结果(正确的输出，但实际上没有单击按钮(，就像我从扩展执行 JavaScript 一样。

编辑：

由于我无法发布我自己问题的答案 - 对于遇到类似问题的未来读者，您只需要在调用click()之前向元素添加一个事件处理程序。

工作代码是这样的：

// Get the element to click
var btn = document.evaluate('//*[@id="watch8-sentiment-actions"]/span/span[1]/button',document, 
    null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null).snapshotItem(0);
console.log(btn);
// Attach an event handler to the button
btn.addEventListener('click', function myClick(){
    var evt = document.createEvent("MouseEvents");
    evt.initMouseEvent("click", true, true, window,
        0, 0, 0, 0, 0, false, false, false, false, 0, null);
});
// Click the button
console.log("About to click like");
btn.click();
console.log("Just clicked like");

可能只有IE和Firefox具有click((函数。有一种方法可以通过发送鼠标事件来发生点击事件：

var button = document.getElementById("foo_button");
var e = document.createEvent("MouseEvents");
e.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false,
false, false, false, 0, null);
button.dispatchEvent(e);
相关文章：