Google 크롬 확장 프로그램을 통해 Gmail에 코드 삽입 -로드가 완료되면 내 스크립트가 삽입되도록하는 방법?

Question

필자가 작성한 스크립트를 삽입하여 Gmail에 추가 기능을 추가하는 Chrome 확장 프로그램을 만들고 있습니다. '주사 스크립트'는 this definition을 참조하십시오.

내 콘텐츠 스크립트는 ["https://mail.google.com/mail/*"]에 일치합니다.

그러나이 문제는 Gmail이로드되고로드가 완료 될 때와 동일한 URL이라는 점에 있습니다. 결과적으로 Gmail이로드되는 중에 참조 스크립트 오류가 발생하면서 스크립트가 너무 일찍 삽입되는 것으로 나타납니다.

이 문제를 회피하려고, 난 단지 수행하여 부하에 내 스크립트를 실행 해요 :합니다 (주입을 수행하는)이 조건에 해당하는 경우, 그것은 단지 주입 window.addEventListener("load", runInjectedScript);

을 그리고 내 콘텐츠 스크립트 : if (window.self === window.top).

그러나 Gmail이로드를 완료하고받은 편지함이 나타나면 이러한 조치로 인해 적절한 시간에 내 스크립트가 항상 주입되지 않을 수도 있습니다. 어떻게 이런 일이 일어날 수 있습니까? 내가 구현하지 않은 기술이 있습니까?

Answer 1

잠재적으로 setInterval을 실행하여 Gmail에서 가로 채고있는 데이터가 아직 사용 가능한지 확인할 수 있습니다.

var gmailLoaded = setInterval(function() { 
    if (typeof GMAIL !== 'undefined') { 
     runInjectedScript(); 
     clearInterval(gmailLoaded); 
    } 
}, 100); 

당신은 Gmail에 참조하기 위해 노력하고 무엇 이건 GMAIL를 교체해야합니다. 로드 중 상태가 활성 상태인지 확인하기 위해 위의 동일한 방법을 사용할 수도 있지만 추가 오버 헤드가 추가 될 수 있습니다.

Answer 2

, 나는 Gmail 페이지를 검사 observing the input being inserted

Answer 3

을 위해 특히 DOM의 변화에 ​​반응 할 수있는 방법을 제공합니다 MutationObserver 한 번 봐 걸릴 "받은 편지함이 나타납니다"때 스크립트를 주입 보장하기 위해받은 편지함로드 번 그들은 #loading 요소에 style="display: none"을 추가합니다.

변경할 수있는 폴링을 수행 한 다음 앱을 부트 스트랩 할 수 있습니다.

function onInboxLoaded(cb) { 
    var pollInterval = setInterval(function() { 
    var elem = document.getElementById('loading'); 
    if (elem && elem.style.display === 'none') { 
     clearInterval(pollInterval); 

     cb(); 
    } 
    }, 100); 
} 

onInboxLoaded(function(){ 
    // bootstrap app 
})