Question

I am working on my first extension for Google Chrome. I want to be able to hit the “Thumbs Up” button on the Google Music Beta page using my extension. For some reason, the thumbs up button seems to be much more complicated than shuffle, repeat, play, next, and previous. For all of those, the following code works:

chrome.tabs.executeScript(tab_id,
            {
              code: "location.assign('javascript:SJBpost(\"" + command +
                    "\");void 0');",
              allFrames: true
            });

where command=”playPause”, “nextSong”, “prevSong”, “toggleShuffle”, “togglePlay”, etc.

I figured a lot of those out using the developer tools to follow the stack trace and see the arguments given to SJBpost. Trying SJBpost with “thumbsUp” returns an error.

Obviously this question is going to be restricted to a smaller crowd since not everyone is going to be able to view the source of Google Music, but if you can help me out, I would greatly appreciate it.

The div for the thumbs up on the Google Music page looks like this:

<div id="thumbsUpPlayer" class="thumbsUp" title="Thumbs up"></div>

Now, I’ve tried doing this using jQuery:

$("#thumbsUpPlayer").click()

But I get TypeError, undefined_method message in the javascript console.

Any help would be greatly appreciated. I am a huge beginner to javascript and plugins, and all of this stuff, and I’m really excited to get these last pieces of the extension together.

Thank you!

Answer 1

It seems that Google Music Beta doesn’t actually listen on the click() event per se, rather, it is based on the events which usually precede the actual click event: mouseover, mousedown and mouseup.

I’m not a jQuery expert, so I can’t exactly figure out why $("#thumbsUpPlayer").mouseover().mousedown().mouseup() doesn’t work (neither does doing .trigger).

Anyway, here’s some (tested on June 21) working javascript code (no dependencies).

function triggerMouseEvent(element, eventname){
    var event = document.createEvent('MouseEvents');
    event.initMouseEvent(eventname, true, true, document.defaultView, 1, 0, 0, 0, 0, false, false, false, false, 0, element);
    element.dispatchEvent(event);
}

function replicateClick(element){
    triggerMouseEvent(element, 'mouseover');
    triggerMouseEvent(element, 'mousedown');
    triggerMouseEvent(element, 'mouseup');
}

function thumbsUp(){
    replicateClick(document.getElementById('thumbsUpPlayer'));
}

function thumbsDown(){
    replicateClick(document.getElementById('thumbsDownPlayer'));
}

It should be probably fairly easy to use, just call thumbsUp() if you want a thumbs up or call thumbsDown() if you want to thumbs down.