无法使用Chrome扩展程序单击按钮，但是我可以在开发人员工具中 [英] Can't click a button using a Chrome extension, but I can in the developer tools

问题描述

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

I'm trying to create a Chrome extension whose sole purpose is to click the like button of a YouTube video. Then, I can map the extension to a shortcut key and press Alt-L or something to like the video.

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

I found the XPath of the button using the developer tools.

因此，我在扩展程序中单击按钮的JavaScript代码是这样的:

So, the JavaScript code I have in the extension to click the button is this:

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开发人员工具的控制台中，我看到了输出:

document.evaluate() actually finds the button. In the Chrome developer tool's console, I see the output:

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

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

But, it doesn't actually click the button.

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

However, if i execute the same exact code within the developer tool's console, it will actually click the button.

任何人都知道为什么它可以在开发人员工具的控制台中运行，但不能在扩展中使用吗?

Anyone know why it would work in the developer tool's console but not from the extension?

此外，我下载了一个扩展名为用于网站的自定义JavaScript ，它将JavaScript代码注入网站.我得到与从扩展中执行JavaScript相同的结果(正确的输出，但实际上没有单击按钮).

Additionally, I downloaded an extension called Custom JavaScript for Websites, which injects JavaScript code into websites. I get the same result (the correct output, but not actually clicking the button) as I do with executing the JavaScript from the extension.

编辑:

由于我无法发布自己的问题的答案-对于将来遇到类似问题的读者，您只需要在元素中添加事件处理程序，然后再调用click().

Since I can't post an answer to my own question - for future readers that encounter a similar problem, you simply need to add an event handler to the element, before you can call 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()函数.有一种方法可以通过发送MouseEvent来发生click事件:

Probably, only IE and Firefox have the click() function. There is a way to occur the click event by sending a MouseEvent:

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);

这篇关于无法使用Chrome扩展程序单击按钮，但是我可以在开发人员工具中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！