1

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.

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

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() 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?

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.

EDIT:

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().

The working code is this:

// 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");
homersimpson
  • 4,124
  • 4
  • 29
  • 39
  • I notice the button has onclick=";return false;" have you tried clicking the span that is the parent? – Dave Bush Feb 09 '16 at 17:40
  • @DaveBush The jQuery code `$(btn).parent()` does return the `span` element, but calling `click()` on that doesn't do anything unfortunately :( – homersimpson Feb 09 '16 at 17:56
  • I think this is your problem - if not, feel free to reply to me here, I'll reverse the duplicate. – Xan Feb 12 '16 at 08:35
  • 1
    @Xan The post you linked did have the same problem as me; however, I feel that if we should redirect people to the duplicated question, we should redirect it here, as this actually answered and explained the problem in detail: http://stackoverflow.com/questions/26390322/clicking-an-element-on-a-page-through-chrome-extension – homersimpson Feb 13 '16 at 07:15
  • This only works when the page is focused. Is there also a way to make this work when the page is not focused? (or am I doing something wrong?) – tbrodbeck Oct 14 '20 at 16:59

1 Answers1

3

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);
Yoichiro Tanaka
  • 835
  • 7
  • 14
  • Thanks! But this only works when I have clicked into the website. Is there also a way how do click the button without having to click into the website by hand? – tbrodbeck Oct 21 '20 at 12:32