주입 된 자바 스크립트로 유튜브 비디오 변경을 감지합니다.

Question

저는 잘 작동하는 유튜브 페이지에 몇 개의 버튼을 추가하는 확장 기능 (일부 주입 된 js)을 구축 중입니다. 내 문제는 사용자가 다른 비디오 (예 : 오른쪽 목록)를 클릭하면 실제 비디오가 다시로드되지 않고 다음 비디오가로드된다는 것입니다. 이 코드를 다시 검색 할 수 있도록이 변경을 감지 할 수있는 방법이 있습니까?

나는 이미 hashchange 이벤트에 바인딩하는 등의 작업을 시도했지만 아무 소용이 없습니다.

Answer 1

아이디어는 간단하다 :

이

• 사용 background.js 탭 변경이 감지되면 chrome.tabs.onUpdated
• 를 사용하여 특정 유튜브 탭의 URL 변경을 듣고, 그 실행 내용 스크립트에 새로운 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); 
     }); 

    } 
}); 

내가 최근에 고민했다

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

Answer 2

을 app.js 내가 무엇을 알아 냈어. 이것이 최선의 방법인지 확실하지 않지만 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; 
    } 
}