YouTube에서 브라우저 확장 기능에 Chrome 확장 프로그램이로드되지 않음

YouTube 동영상 페이지에 도착했을 때로드되는 확장 프로그램이 있다고 가정 해 봅시다. Chrome 버튼을 사용하여 앞뒤로 탐색 할 때 확장 프로그램이 가장 많이 획득 한 것으로 나타났습니다 '로드.YouTube에서 브라우저 확장 기능에 Chrome 확장 프로그램이로드되지 않음

{ 
    "name": "back forth", 
    "version": "0.1", 
    "manifest_version": 2, 
    "description": "back forth", 
    "permissions": ["storage", "*://www.youtube.com/watch*"], 
    "content_scripts": [ 
     { 
      "matches": ["*://www.youtube.com/watch*"], 
      "js": ["contentscript.js"] 
     } 
    ] 
}

앞뒤로 탐색 할 때 경고가 항상 표시되지 않습니다 contentscript

alert("loaded");

는 예를 들어, 나는 2 개 파일, 매니페스트 있습니다. 확장을 매번로드 할 수 있도록이 문제를 어떻게 극복 할 수 있습니까?

출처

2013-08-23 abinop

유사 http://stackoverflow.com/a/34100952/72321 – Dennis

YouTube는 pushState 기반 탐색을 사용하여 평가판을 시작했습니다. 일반적으로 이러한 탐색은 콘텐츠 스크립트 내에서 history.replaceState/history.pushState (또는 배경 페이지의 chrome.webNavigation.onHistoryStateUpdated 이벤트 사용)에 대한 호출을 가로채는 코드를 삽입하여 만 검색 할 수 있습니다.

나머지는 YouTube에만 해당됩니다.
YouTube는로드하는 동안 페이지 상단에 (빨간색) 진행률 표시 줄을 표시합니다. 이 진행률 표시 줄은 CSS 전환을 사용하여 애니메이션으로 표시됩니다. 전환 이벤트가 거품으로 나타나기 때문에 전환 이벤트 리스너를 <body>에 바인드하고 이러한 경우 탐색을 확인할 수 있습니다. pushState이 /에서 /watch..로 이동하는 데 사용할 수 있기 때문에

당신은 대신 *://www.youtube.com/watch*의 *://www.youtube.com/*에서 콘텐츠 스크립트를 삽입해야합니다.

function afterNavigate() { 
    if ('/watch' === location.pathname) { 
     alert('Watch page!'); 
    } 
} 
(document.body || document.documentElement).addEventListener('transitionend', 
    function(/*TransitionEvent*/ event) { 
    if (event.propertyName === 'width' && event.target.id === 'progress') { 
     afterNavigate(); 
    } 
}, true); 
// After page load 
afterNavigate();

참고 :이 방법은 진행률 표시 줄이 삽입되어 있는지 여부에 따라 다릅니다. Google에서 진행률 표시 줄의 ID 이름을 바꾸거나 진행률 표시 줄을 모두 삭제하기로 결정하면 코드가 작동하지 않습니다.

참고 2 : 활성 탭에서만 작동합니다. 탭에 포커스가없는 상태에서 탐색 변경 사항을 감지해야하는 경우 window.onfocus 및 window.onblur 이벤트를 바인드하고 document.title이 이러한 이벤트간에 변경되었는지 확인해야합니다.

출처

2013-08-23 09:04:37

답장을 보내 주셔서 감사합니다. 이 방법을 사용하면 작동하지만 DOMContentLoaded만큼 빠르지는 않습니다. 이것은 'load'와 같은 것으로 보이는데, 어쨌든 DOMContentLoaded와 같은 점을 감지 할 수 있습니까? – Noitidart

@Noitidart 가능한 한 빨리 통지를 받고 싶다면'transitionstart' 이벤트에 바인딩하여 (setTimeout 또는 setInterval을 사용하여) 문서 변경 사항을 폴링 할 수 있습니다. 원하는 요소를 찾았 으면 전환 시작 이벤트 + 폴링 중지 및 사용자 정의 콜백 호출을 등록 취소하십시오. CPU주기를 낭비하지 않게하려면 이것을 transitionend 이벤트와 결합하십시오. 폴링 로직이 그 시점에서 아무 것도 감지하지 못하면 이벤트 리스너를 제거하고 폴러를 중지하고 콜백을 호출합니다. –

천재 아이디어 @RobW 감사합니다! 나는 window.onpopstate = function (e) {console.log (e)}'를 추가하려고 시도했다. 그 트릭을 할 것이라고 생각했지만 콜백을받지 못했다. – Noitidart

YouTube에서 브라우저 확장 기능에 Chrome 확장 프로그램이로드되지 않음

답변

관련 문제