Jim Jim - 14 days ago 5
Javascript Question

Is there a way to simulate pressing multiple keys on mouse click with javascript?

I'm working on chrome extension to make Netflix video player opens the hidden changing quality panel.

Netflix Changes the video quality automatically depending on the speed of your Internet.

But there is a known way to open the hidden panel and change the quality manually.

This is the method to open the hidden panel in HTML5 Player Only CTRL + SHIFT + ALT + S

Is there a way when the user clicks on Title,

it simulates the keyboard keys

CTRL + SHIFT + ALT + S
?

$('body').on('click', 'div.player-status .player-status-main-title', function () {
alert('Clicked!');
//Simulate?
});

Xan Xan
Answer

Try this (can't test, since I can't access Netflix tested, confirmed working as of 11.11.14).

function simulateCtrlShiftAltS() {
  // Prepare function for injection into page
  function injected() {
    // Adjust as needed; some events are only processed at certain elements
    var element = document.body;

    function keyEvent(el, ev) {
      var eventObj = document.createEvent("Events");
      eventObj.initEvent(ev, true, true);

      // Edit this to fit
      eventObj.keyCode = 83;
      eventObj.which = 83;
      eventObj.ctrlKey = true;
      eventObj.shiftKey = true;
      eventObj.altKey = true;

      el.dispatchEvent(eventObj);
    }

    // Trigger all 3 just in case
    keyEvent(element, "keydown");
    keyEvent(element, "keypress");
    keyEvent(element, "keyup");
  }

  // Inject the script
  var script = document.createElement('script');
  script.textContent = "(" + injected.toString() + ")();";
  (document.head||document.documentElement).appendChild(script);
  script.parentNode.removeChild(script);
}

This code is adapted from comments to the answer you linked: http://stackoverflow.com/a/10520017/2518069

To be precise, from this example: http://jsbin.com/awenaq/4

Regarding "adjust as needed":

Some pages process events on an element and some wait until it bubbles to something like body or document. You can spy on this by going to Dev Tools, Sources, and enabling Event Listener Breakpoints > Keyboard. From there, you'll be able to see which event triggers the change you need, and which element catches it - it will be in this when the breakpoint triggers.

Also, note that all of this may not work if the player is actually a plugin. I tested this on YouTube HTML5 player: it works for everything but fullscreen (which I believe to be a security restriction?), and is processed at element #movie_player.