檢測Youtube視頻變化與注入javascript

我正在建立一個擴展（一些注入的JS），它增加了一些按鈕到YouTube網頁，這工作正常。我的問題是，當用戶點擊另一個視頻（比如在右側列表中）時，下一個視頻將被加載，而不會重新加載實際的頁面。有什麼方法可以檢測到這種變化，以便我可以重新運行我的代碼？檢測Youtube視頻變化與注入javascript

我已經嘗試過像綁定到hashchange事件的事情，無濟於事。

來源

2014-02-09 Matt Way

看起來它使用'history.pushState（）'來更改URL和視頻。閱讀這個答案，知道如何進一步：http://stackoverflow.com/a/5134732/921204 – techfoobar

使用該鏈接給出的解決方案，它使用前進/後退瀏覽器按鈕，但我仍然無法觸發單擊視頻時的代碼。 –

當你打開一個新的視頻時，popState是否被觸發？即使它的名字是* pop * State，我認爲我在某處讀到它在URL因爲pushState或replaceState操作而改變時被觸發。 – techfoobar

的想法很簡單：

使用background.js偵聽網址更改一旦檢測到標籤更改使用chrome.tabs.onUpdated
一個特定YouTube選項卡，發送新網址的內容腳本運行在標籤

背景頁面監聽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); 
});

來源

2014-02-10 02:39:07 1337holiday

看起來不錯。在對此方法進行了一些試用後，我會將其標記爲答案。 –

首先測試它作爲一個新的應用程序，然後構建它。讓我知道你是否發現問題。 – 1337holiday

@ 1337holiday你有'tabId'作爲你的回調參數，你不需要查詢來獲得一個標籤ID。 – rsanchez

我最近與此掙扎，我想通了，做什麼。我不確定這是否是最好的方法，但它不依賴於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; 
    } 
}

來源

2016-01-10 18:09:40

檢測Youtube視頻變化與注入javascript

回答

相關問題