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 t

Answer 1

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.