Is there a way to simulate multiple key presses on mouse click using javascript?
I'm working on a chrome extension to make the Netflix video player reveal a hidden variable quality bar.
Netflix Automatically changes video quality based on your internet speed.
But there is a known way to open a hidden panel and manually change the quality.
This is the method to open hidden panel only in HTML5 Player CTRL + SHIFT + ALT + S
Is there a way when the user clicks on Title
it simulates keyboard keys CTRL + SHIFT + ALT + S
?
$('body').on('click', 'div.player-status .player-status-main-title', function () {
alert('Clicked!');
//Simulate?
});
source to share
Try it ( cannot test as I cannot access Netflix, verified, confirmed from 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 the comments on the answer you linked: fooobar.com/questions/22829 / ...
To be precise from this example: http://jsbin.com/awenaq/4
Regarding "adjust if necessary":
Some pages handle events on an element, and some wait until it turns into something like body
or document
. You can follow this up by going to Dev Tools, Sources and enabling Breakpoints Event Listener> Keyboard. From there, you should be able to see which event triggers the change you need and which element is catching it - it will be in this
when the breakpoint is triggered.
Also note that this may not work if the player is actually a plugin. I tested this on YouTube's HTML5 player: it works for everything except fullscreen (which I believe is a security limitation?) And is handled in the element #movie_player
.
source to share
Since this does not mean that the Netflix player code sets up event listeners using jQuery, I would recommend a custom js event solution. It is also possible that Netflix needs an event that is more natural than just triggering four key events in 1ms (see this SO question ).
The function below creates four native keydown
-KeyboardEvents with the correct properties for the keys, in the order you specify. They start with a 50ms delay between simulating more natural behavior. I added right after keypress
-event with 'S' because some devices start on this.
Within timeouts, the IIFE (immediately called function expression) is used to pass events as arguments to 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 was found that web browsers do not set properties correctly keyCode
- and which
. I do not recommend using .initKeyboardEvent()
it because it is deprecated and browsers handle it very differently. So I added a method to override these properties in the event object. This is a termi inspired answer to this SO question . I also switched from T
to S
.
Now this FIDDLE works for FF, Chrome and Opera, but not IE and Safari (no implementation of the KeyboardEvent API). I will try to find and implement a simple solution for them.
EDIT 2: Since it still doesn't work, we add the keyup event on the 'S'. See Modified Code. If that's not enough, we'll release ALT, SHIFT and CTRL in stages before we give up.
source to share