Question

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

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

Answer 1

这个想法很简单：

使用background.js来监听使用chrome.tabs.onUpdated
检测到标签更改后，将新网址发送到该标签中运行的内容脚本

后台页面也会监听对其他标签的网址更改，但我很确定您可以弄清楚如何解决这个问题。

的的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

我最近在努力解决这个问题，我想出了该怎么做。我不确定这是否是最好的方法，但它不依赖于background.js文件。

var oldURL= ""

//window.setInterval takes a function and executes it after 
//a given time (defined by the second parmeter)in miliseconds

var urlChangeHandler = window.setInterval(checkUrlChange, 500)

function checkURLChange(){
  newURL = document.URL;
  if(newURL !== oldURL){
   doSomething();
   oldURL = newURL;
  }
}

Answer 3

我希望这对某人有帮助。

var old_url = '';
var mutationObserver = new MutationObserver(function (mutations) {
    mutations.forEach(function (mutation) {
            if (location.href != old_url) {
                old_url = location.href;
                console.log('URL was changed');
            }
    });
});

mutationObserver.observe(document.documentElement, {childList: true, subtree: true});

Answer 4

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

我在为youtube构建Chrome扩展程序时遇到了类似的问题。具体来说，我需要检测youtube内的导航。

TL; DR;
在遍历了大多数StackOverflow之后，我在context.js文件中以以下内容结束了。

function run(){
// your youtube extention logic 
}

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

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

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

4 个答案: