How to mute/unmute a Google Hangout via JS (no jQuery)?

Question

I want to write a Chrome extension that lets you mute/unmute your Hangout from a browser action button rather than making you open the Hangout tab and do it there, but it appears that their HTML and JS is obfuscated so I can't figure out a decent want to trigger it when messing around in the JS console.

I was able to select the button element itself using

el = document.querySelector("[data-tooltip='Unmute microphone']");

...but running el.click() on that doesn't do anything. So I tried setting a click event breakpoint but that just shot me into a huge JS file with a bunch of minified code so I'm sort of out of ideas.

Answer 1

After a few minutes of fiddling with the Chrome developer tools, I decided to not walk through the source code with the debugger, but study the behaviour of the button with breakpoints (Sources panel), and some educated guesses.

Long story short, Hangouts can be (un)muted by triggering the following events in the order specified:

• mousedown - To activate the button
• mouseup - To trigger the associated "click" handler
• mouseout - To remove the focus ring from the button (optional).

To select the target element, I did not use the selector you provided, because it won't work for a localized (non-English) Hangouts interface. Instead, I target the CSS class for the microphone icon, and select its container (the button), "ha-w-P-y-Xi-f".

Finally, use the MouseEvent constructor (DOM4) and the dispatchEvent method to toggle the microphone in Hangouts:

var el = document.querySelector('.ha-w-P-y-Xi-f').parentNode;
el.dispatchEvent(new MouseEvent('mousedown'));
el.dispatchEvent(new MouseEvent('mouseup'));
el.dispatchEvent(new MouseEvent('mouseout'));