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

时间:2016-02-09 16:57:44

标签: javascript xpath google-chrome-extension

我正在尝试制作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 Websites的扩展程序,该扩展程序将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");

1 个答案:

答案 0 :(得分:3)

可能只有IE和Firefox有click()函数。有一种方法可以通过发送MouseEvent来发生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);