使用注入的javascript检测Youtube视频更改

Question

我正在构建一个扩展(一些注入js),为youtube页面添加了一些按钮,工作正常.我的问题是,当用户点击另一个视频时(例如在右侧列表中),下载的视频将在没有实际页面重新加载的情况下加载.有没有办法检测到这个变化,以便我可以重新运行我的代码？

我已经尝试过绑定hashchange事件这样的事情,但无济于事.

Answer 1

这个想法很简单:

• 使用background.js用于监听网址更改为特定的YouTube标签chrome.tabs.onUpdated
• 检测到选项卡更改后,将新URL发送到该选项卡中运行的内容脚本

后台页面也会侦听其他选项卡的URL更改,但我很确定您可以弄清楚如何解决这个问题.

的manifest.json

{
    "manifest_version": 2,
    "name": "Tab url change detection",
    "version": "1.0",
    "background": {
        "persistent":true,
        "page":"bg.html"
    },
    "content_scripts": [{
            "matches": ["http://www.youtube.com/*"],
            "js": ["app.js"]
        }
    ],
    "permissions": [
        "tabs",
        "http://www.youtube.com/*"
    ]
}

background.html

<script src="background.js"></script>

background.js

//Listen for when a Tab changes state
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab){
    if(changeInfo && changeInfo.status == "complete"){
        console.log("Tab updated: " + tab.url);

        chrome.tabs.sendMessage(tabId, {data: tab}, function(response) {
            console.log(response);
        });

    }
});

app.js

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    //here we get the new 
    console.log("URL CHANGED: " + request.data.url);
});

Answer 2

我知道这是一个旧线程，但我希望其他人能够使用此信息。

我在为 YouTube 构建 chrome 扩展时遇到了类似的问题。更具体地说，我需要检测 youtube 内的导航。

TL;博士;
在浏览了 StackOverflow 的大部分内容后，我在文件中添加了以下内容context.js。

function run(){
// your youtube extention logic 
console.log('change');
}

window.onload = run;
window.addEventListener('yt-navigate-start', run,   true);

说明 如果您希望查看所有可以运行的窗口事件getEventListeners(window)。

youtube在换页时有一个服装事件，事件是yt-navigate-start。

第一次加载 YouTube 时，我使用了 window.onload，然后添加事件侦听器window.addEventListener('yt-navigate-start', run, true);

祝你好运，我希望这能有所帮助。