javascript - 使用注入(inject)的 javascript 检测 Youtube 视频变化

Question

我正在构建一个扩展(一些注入(inject)的 js)，它将一些按钮添加到 youtube 页面，效果很好。我的问题是，当用户点击另一个视频(比如在右侧列表中)时，下一个视频会在没有实际页面重新加载的情况下加载。有什么方法可以检测到此更改以便我可以重新运行我的代码吗？

我已经尝试过绑定(bind)到 hashchange 事件，但无济于事。

Answer 1

这个想法很简单:

• 使用 background.js 使用 chrome.tabs.onUpdated 监听特定 youtube 标签页的 url 变化
• 一旦检测到选项卡更改，将新 URL 发送到该选项卡中运行的内容脚本

后台页面也会监听 其他 标签的 URL 更改，但我很确定您能找到解决方法。

ma​​nifest.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);
});