用注入的javascript检测Youtube视频变化 [英] Detect Youtube video change with injected javascript

问题描述

我正在构建一个扩展（一些注入的js），它向youtube页面添加了一些按钮，工作正常。我的问题是，当用户点击另一个视频（比如在右侧列表中）时，下一个视频将被加载，而不会重新加载实际的页面。有没有什么方法可以检测到这种变化，以便我可以重新运行我的代码？

我已经尝试了像绑定 hashchange event，无济于事。

解决方案

这个想法很简单：

• 使用 background.js 来侦听使用 chrome.tabs对特定YouTube选项卡进行的URL更改。 onUpdated


• 检测到选项卡更改后，将新URL发送到该选项卡中运行的内容脚本

后台页面也会监听其他标签的URL更改，但我确信您可以弄清楚如何解决该问题。

manifest.json

  {
manifest_version：2，
name：标签网址更改检测，
版本：1.0，
背景：{
persistent：true，
page：bg.html
}，
content_scripts：[{
 matches：[http://www.youtube.com/*]，
js：[app.js] 
} 
]，
 权限：[
标签，
http://www.youtube.com/*
] 
} 
  

background.html

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

background.js

  //当Tab改变状态时监听
 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）{
 //这里我们得到新的
 console.log（URL CHANGED：+ request.data.url）; 
}）; 
  

I am building an extension (some injected js) that adds some buttons to a youtube page, which works fine. My issue is that when a user clicks on another video (say in the right hand side list), the next video is loaded without an actual page reload. Is there any way to detect this change so that I can rerun my code?

I have already tried things like binding to the hashchange event, to no avail.

解决方案

The idea is simple:

• Use background.js to listen for url changes to a specific youtube tab using chrome.tabs.onUpdated
• Once tab change is detected, send the new URL to the content-script running in that tab

The background page listens for URL changes to other tabs also but I'm pretty sure you can figure out how to fix that.

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

这篇关于用注入的javascript检测Youtube视频变化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！