Menu
I'm trying to control Netflix's player from a Google Chrome extension. Here's an image of the controls bar, for those who are not familiar with it.
I managed to simulate a click on play/pause, next episode and toggle full screen buttons (those with an orange square) using the following code:
$(".[control class]").click();
But the same logic doesn't seem to apply to the slider that controls in which part of the video you're current in (that one inside the blue rectangle).
What I want to do is to change the current position of the video (for example, going back 10 seconds). Here's what I've tried so far:
Change aria-valuenow on section role="slider":
$(".player-slider")["aria-valuenow"] = 0;
Retrieve the red circle, change it's position and click on it:
$(".player-scrubber-target")["style"] = "width: 30%";
$(".player-scrubber-target").click();
(Desperate) Change width and/or click on every bar inside the section:
.player-scrubber-progress-buffered (change width and click)
.player-scrubber-progress-completed (change width and click)
.player-scrubber-progress (click)
#scrubber-component (click)
Big thanks to Kodos Johnson for pointing me out to this question, and to kb0 for the original code, with a bit of research I'm able to change the volume and player position from the Chrome Developer Tools' Console. Here's the code (change [VOLUME] for the desired volume 0~99 and [POSITION] for the desired position):
// Change volume
netflix.cadmium.UiEvents.events.resize[0].scope.events.dragend[0].handler(null, {pointerEventData: {drag: {current: {value: [VOLUME]}}}});
// Change player position
netflix.cadmium.UiEvents.events.resize[1].scope.events.dragend[1].handler(null, {value: [POSITION], pointerEventData: {playing: false}});
Unfortunately, this does't seem to work outside the Chrome Developer Tools. When I run the snippets from my extension I get this:
Uncaught ReferenceError: netflix is not defined at <anonymous>:1:1
Here's how I'm running the script from my extension:
chrome.tabs.getSelected(null, function(tab){
chrome.tabs.executeScript(tab.id, {code: [SNIPPET]}, function(response) {});
});
How can I change the current position of the video programmatically (or simulate that the user clicked on the bar and changed it manually) from an Chrome extension?
982
Well, thanks to Kodos Johnson and Dehli for putting me in the right direction, and to kb0 for the following piece of code [...]
netflix.cadmium.UiEvents.events.resize[1].scope.events.dragend[1].handler(null, {value: 999, pointerEventData: {playing: false}});
[...] with a bit of research I managed to get access to both the volume and the video position controls and access them from Chrome Developer Tools' Console. To get around the fact that my extension did not have access to netflix var, I'm injecting the code on the page's <head>.
Here's a full example:
function ChangeVolume(volume)
{
InjectScriptOnPage("netflix.cadmium.UiEvents.events.resize[0].scope.events.dragend[0].handler(null, {pointerEventData: {drag: {current: {value: " + volume + "}}}});");
}
function ChangePosition(position)
{
InjectScriptOnPage("netflix.cadmium.UiEvents.events.resize[1].scope.events.dragend[1].handler(null, {value: " + position + ", pointerEventData: {playing: false}});");
}
function InjectScriptOnPage(script)
{
var script = "var head = document.getElementsByTagName('head')[0]; \
var script = document.createElement('script');\
script.type = 'text/javascript'; \
script.innerHTML = '" + script + "'; \
head.appendChild(script);";
ExecuteScriptOnPage(script);
}
function ExecuteScriptOnPage(script)
{
chrome.tabs.getSelected(null, function(tab){
chrome.tabs.executeScript(tab.id, {code: script}, function(response) {});
});
}
(I'll wait until the end of the bounty to mark this as accepted, in case someone posts a better answer)
142
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With