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

Question

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?
});

Answer 1

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: https://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.

Answer 2

Since it's not shure that the Netflix player code sets the event-listeners with jQuery, I would recommend a solution with native js-events. It's also possible that Netflix needs an event-timing that's more natural than simply firing four key-events in 1ms (see this SO - question).

The function below creates four native keydown-KeyboardEvents with the right properties for the keys in the order you gave. They are fired with a delay of 50ms in between to simulate a more natural behaviour. I have added an immediately following keypress-event with 'S', because some devices trigger on that.

Inside the Timeouts an IIFE (immediately invoked function expression) is used to pass the events as arguments into the Timeout-callback.

function simulateCtrlShiftAltS() {
    var keys = [
            {view: document.defaultView, bubbles: true, location: 1, keyLocation: 1, keyIdentifier: 'U+0017', key: 'Control', keyCode: 17, which: 17, altKey: false, ctrlKey: true, shiftKey: false},
            {view: document.defaultView, bubbles: true, location: 1, keyLocation: 1, keyIdentifier: 'U+0016', key: 'Shift', keyCode: 16, which: 16, altKey: false, ctrlKey: true, shiftKey: true},
            {view: document.defaultView, bubbles: true, location: 1, keyLocation: 1, keyIdentifier: 'U+0018', key: 'Alt', keyCode: 18, which: 18, altKey: true, ctrlKey: true, shiftKey: true},
            {view: document.defaultView, bubbles: true, location: 0, keyLocation: 0, keyIdentifier: 'U+0053', key: 'S', keyCode: 83, which: 83, altKey: true, ctrlKey: true, shiftKey: true}
        ], body = document.body;
    for (var i = 0; i < 5; i++) {
        var events = [new KeyboardEvent(i == 4 ? 'keyup' : 'keydown', keys[i] || keys[3])];
        if (i == 3) events.push(new KeyboardEvent('keypress', keys[i]));
        if (events[0].keyCode == 0) events.forEach(function(ev) {
            ['keyCode', 'which'].forEach(function(p) {
                delete ev[p]; Object.defineProperty(ev, p, {value: (keys[i] || keys[3])[p], enumerable: true});
            });
        });
        window.setTimeout(function(evts) {
            return function() {evts.forEach(function(ev) {body.dispatchEvent(ev);});};
        }(events), i * 50);
    }
}

You can simply pass the function to the click-handler:

$('body').on('click', 'div.player-status .player-status-main-title', simulateCtrlShiftAltS);

EDIT: It has been found that webkit browsers don't set the keyCode- and which-property correctly. I don't recommend usage of .initKeyboardEvent() because it's deprecated and browsers handles it very different. So I added a method to redefine these properties in the event-object. It's inspired by termi's answer on this SO-question. I have also switched from T to S.

Now this FIDDLE works for FF, Chrome and Opera but not IE and Safari (no Implementation of KeyboardEvent API). I'll try to find and implement a simple solution for them.

EDIT 2: Since it's still not working we add a keyup-event on 'S'. See the changed code. If that's not enough we will stepwise release also ALT, SHIFT, and CTRL before we give up.