Google Chrome拡張機能を使用してGmailにコードを挿入する - 読み込みが完了したらスクリプトを挿入する方法を教えてください。

Question

私は書いたスクリプトを注入してGmailにいくつかの機能を追加するGoogle Chrome拡張機能を作成しています。 「注射スクリプト」によってthis definitionを参照してください。

これを行うには、私のコンテンツスクリプトは["https://mail.google.com/mail/*"]に一致します。

ただし、これはGmailが読み込まれて読み込みが完了したときと同じURLであるという問題があります。その結果、Gmailの読み込み中に参照元エラーが発生することがありますが、スクリプトが早すぎるタイミングで注入されることがあります。この問題を回避しようとする

、私は実行して負荷に私のスクリプトを実行している： window.addEventListener("load", runInjectedScript);

をそして、この条件が真であるとき（注入を行います）私のコンテンツスクリプトでは、それが唯一の注入します： if (window.self === window.top)。

ただし、Gmailの読み込みが完了して受信トレイが表示されると、これらの対策では、適切なタイミングでスクリプトを挿入することが保証されていないようです。 どうすればこのようになるのですか？私が実装していない技術はありますか？

Answer 1

Gmailで傍受しているデータがまだ利用可能かどうかを確認するためにsetIntervalチェックを実行する可能性があります。

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

あなたがGmailからの参照しようとしているものは何でもしてGMAILを交換する必要があります。上記の同じアプローチを使用して、ローディング状態がアクティブかどうかを確認することもできますが、オーバーヘッドが増える可能性があります。

Answer 2

DOMの変化に反応する方法を提供している、MutationObserverを見てみましょう、「受信ボックスが表示された」とき注入するスクリプトを確保するために、特にobserving the input being inserted

Answer 3

のために、私はGmailのページを点検し、受信トレイのロード一度それらは、要素に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 
})