logo标签列表

程序模拟在 Netflix 的 aria 滑杆上点击/更改值

javascriptjquerywai-arianetflix
9
我正在尝试通过Google Chrome扩展程序控制Netflix播放器。以下是控件栏的图像，供不熟悉的人参考。

Netflix player print

我成功模拟了点击播放/暂停、下一集和切换全屏按钮（那些带有橙色方块的按钮），使用以下代码：
$(".[control class]").click();

但是同样的逻辑似乎不适用于控制视频当前位置的滑块（位于蓝色矩形框内的那个）。
我想要做的是改变视频的当前位置（例如，倒退10秒）。到目前为止，我尝试过以下方法：
更改section role="slider"上的aria-valuenow：
$(".player-slider")["aria-valuenow"] = 0;

获取红色圆圈，改变其位置并单击它：

$(".player-scrubber-target")["style"] = "width: 30%";
$(".player-scrubber-target").click();

(绝望的) 更改宽度和/或单击部分内的每个条形:

.player-scrubber-progress-buffered (change width and click)
.player-scrubber-progress-completed (change width and click)
.player-scrubber-progress (click)
#scrubber-component (click)

@编辑

非常感谢Kodos Johnson指出了this问题，以及kb0提供的原始代码。经过一些研究，我能够从Chrome开发者工具的控制台更改音量和播放器位置。以下是代码（将[VOLUME]更改为所需的音量0~99，将[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}});

不幸的是，在Chrome开发者工具之外似乎无法正常工作。当我从我的扩展程序运行代码片段时，会出现以下情况：

Uncaught ReferenceError: netflix is not defined at <anonymous>:1:1

以下是我从扩展程序中运行脚本的方法：

chrome.tabs.getSelected(null, function(tab){
    chrome.tabs.executeScript(tab.id, {code: [SNIPPET]}, function(response) {});
});

问题：

如何从Chrome扩展程序中以编程方式更改视频的当前位置（或模拟用户单击滑动条并手动更改）？

2
我找到了这个链接并测试过，看起来它可以工作：https://dev59.com/Lp7ha4cB1Zd3GeqPq_FL - Cave Johnson
2
从那个页面复制代码片段。使用 netflix.cadmium.UiEvents.events.resize[1].scope.events.dragend[1].handler(null, {value: 999, pointerEventData: {playing: false}}); 并更改 value 属性，然后在控制台中尝试它。 - Cave Johnson
嗨@KodosJohnson，感谢您的评论。我尝试了这段代码片段，在Chrome开发者工具的控制台中使用它确实可以工作。但是当我从我的扩展程序中执行它时，似乎'netflix'无法访问：Uncaught ReferenceError: netflix is not defined at <anonymous>:1:1。 - appa yip yip
2
我建议尝试查看这个链接，看看是否可以使用其中的答案来访问 Netflix。 - Dehli
1个回答
4

感谢 Kodos Johnson 和 Dehli 指导我正确的方向，同时也感谢kb0 提供了下面这段代码 [...]

netflix.cadmium.UiEvents.events.resize[1].scope.events.dragend[1].handler(null, {value: 999, pointerEventData: {playing: false}});

经过一些研究，我成功地通过 Chrome 开发者工具的控制台访问了音量和视频位置控件。为了绕过扩展程序无法访问 netflix 变量的限制，我将代码注入了页面的 <head> 中。

以下是完整示例：

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

（我会等到赏金结束再标记为已接受，以防有人发布更好的答案）
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接