I'm working on chrome extension to make Netflix video player opens the hidden changing quality panel.
我正在研究chrome扩展,以使Netflix视频播放器打开隐藏的不断变化的质量面板。
Netflix Changes the video quality automatically depending on the speed of your Internet.
Netflix根据您的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
这是在HTML5播放器中仅打开隐藏面板的方法CTRL + SHIFT + ALT + S.
Is there a way when the user clicks on Title,
it simulates the keyboard keys CTRL + SHIFT + ALT + S ?
有没有办法当用户点击标题时,它模拟键盘键CTRL + SHIFT + ALT + S?
$('body').on('click', 'div.player-status .player-status-main-title', function () { alert('Clicked!'); //Simulate?});2 个解决方案
#1
8
Try this (can't test, since I can't access Netflix tested, confirmed working as of 11.11.14).
试试这个(无法测试,因为我无法访问Netflix测试,确认工作时间为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://*.com/a/10520017/2518069
此代码根据您链接的答案的评论进行调整:https://*.com/a/10520017/2518069
To be precise, from this example: http://jsbin.com/awenaq/4
确切地说,从这个例子: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.
有些页面会处理元素上的事件,有些页面会等到它出现像body或document这样的东西。您可以通过转到Dev Tools,Sources以及启用事件侦听器断点>键盘来监视此事。从那里,您将能够看到哪个事件触发了您需要的更改,以及哪个元素捕获它 - 当断点触发时它将在此处。
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.
另外,请注意,如果播放器实际上是一个插件,所有这些可能都不起作用。我在YouTube HTML5播放器上进行了测试:它适用于除全屏之外的所有内容(我相信这是一个安全限制?),并在元素#movie_player处理。
#2
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).
由于Netflix播放器代码使用jQuery设置事件监听器并不是真的,我建议使用本机js-events的解决方案。 Netflix也可能需要一个事件定时,这比在1ms内简单地触发四个关键事件更自然(参见这个问题)。
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.
下面的函数创建四个本机keydown-KeyboardEvents,按照您给出的顺序为键提供正确的属性。它们在中间延迟50ms被触发以模拟更自然的行为。我已经添加了一个紧随其后的按键事件'S',因为有些设备会触发它。
Inside the Timeouts an IIFE (immediately invoked function expression) is used to pass the events as arguments into the Timeout-callback.
在Timeouts内部,IIFE(立即调用的函数表达式)用于将事件作为参数传递到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:
您只需将该函数传递给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'sinspired by termi's answer on this SO-question. I have also switched from T to S.
编辑:已经发现webkit浏览器没有正确设置keyCode-和which属性。我不建议使用.initKeyboardEvent(),因为它已被弃用,浏览器处理它非常不同。所以我添加了一个方法来重新定义事件对象中的这些属性。它受到了这个SO问题的termi答案的启发。我也从T切换到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.
现在这个FIDDLE适用于FF,Chrome和Opera,但不适用于IE和Safari(没有KeyboardEvent API的实现)。我会尝试为他们找到并实现一个简单的解决方案。
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.
编辑2:由于它仍然无法正常工作,我们在'S'上添加了一个keyup-event。查看更改的代码。如果这还不够,我们会在放弃之前逐步释放ALT,SHIFT和CTRL。
#1
8
Try this (can't test, since I can't access Netflix tested, confirmed working as of 11.11.14).
试试这个(无法测试,因为我无法访问Netflix测试,确认工作时间为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://*.com/a/10520017/2518069
此代码根据您链接的答案的评论进行调整:https://*.com/a/10520017/2518069
To be precise, from this example: http://jsbin.com/awenaq/4
确切地说,从这个例子: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.
有些页面会处理元素上的事件,有些页面会等到它出现像body或document这样的东西。您可以通过转到Dev Tools,Sources以及启用事件侦听器断点>键盘来监视此事。从那里,您将能够看到哪个事件触发了您需要的更改,以及哪个元素捕获它 - 当断点触发时它将在此处。
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.
另外,请注意,如果播放器实际上是一个插件,所有这些可能都不起作用。我在YouTube HTML5播放器上进行了测试:它适用于除全屏之外的所有内容(我相信这是一个安全限制?),并在元素#movie_player处理。
#2
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).
由于Netflix播放器代码使用jQuery设置事件监听器并不是真的,我建议使用本机js-events的解决方案。 Netflix也可能需要一个事件定时,这比在1ms内简单地触发四个关键事件更自然(参见这个问题)。
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.
下面的函数创建四个本机keydown-KeyboardEvents,按照您给出的顺序为键提供正确的属性。它们在中间延迟50ms被触发以模拟更自然的行为。我已经添加了一个紧随其后的按键事件'S',因为有些设备会触发它。
Inside the Timeouts an IIFE (immediately invoked function expression) is used to pass the events as arguments into the Timeout-callback.
在Timeouts内部,IIFE(立即调用的函数表达式)用于将事件作为参数传递到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:
您只需将该函数传递给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'sinspired by termi's answer on this SO-question. I have also switched from T to S.
编辑:已经发现webkit浏览器没有正确设置keyCode-和which属性。我不建议使用.initKeyboardEvent(),因为它已被弃用,浏览器处理它非常不同。所以我添加了一个方法来重新定义事件对象中的这些属性。它受到了这个SO问题的termi答案的启发。我也从T切换到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.
现在这个FIDDLE适用于FF,Chrome和Opera,但不适用于IE和Safari(没有KeyboardEvent API的实现)。我会尝试为他们找到并实现一个简单的解决方案。
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.
编辑2:由于它仍然无法正常工作,我们在'S'上添加了一个keyup-event。查看更改的代码。如果这还不够,我们会在放弃之前逐步释放ALT,SHIFT和CTRL。