web-dev-qa-db-ja.com

ページのJavascriptが実行された後にロードするコンテンツスクリプトを取得する方法は?

私の拡張機能は、コンテンツスクリプト、searchTopic.jsをロードすることになっています。これは、挿入されたページが既に完全にロードされた後(はい、拡張機能マニフェストで "run_at"を "document_end"に設定しました)すべてのDOMオブジェクトが作成されました(重要なオブジェクトはページ内のJavascriptを介して作成されます)。質問は、ページのJavascriptが実行されるまでどのように待つことができるのでしょうか?ここに私のマニフェストがあります:

"content_scripts": [
  {
  "run_at": "document_end",
  "matches": ["https://groups.google.com/forum/*"],
  "js": ["searchTopic.js"]
  }
],
26
FractalBob

"run_at": "document_end"DOMContentLoadedと同等です。 つまり、staticHTMLがロードされた後、遅い画像の前に起動します遅いJavaScriptの仕上げ。

そのため、マニフェストだけを設定するだけでは、ページのJSの後に起動するようにコンテンツスクリプトを設定することはできません。コンテンツスクリプト自体でこれをコーディングする必要があります。

コンテンツスクリプトの場合、"run_at": "document_end"は、onloadイベントの前に起動します(デフォルトのdocument_idle-予測不能な時間に起動する可能性があります。

したがって、最初のステップは、コンテンツスクリプト内のこのようなコードでloadイベントを待つことです(searchTopic.js):

window.addEventListener ("load", myMain, false);

function myMain (evt) {
    // DO YOUR STUFF HERE.
}


気になるスクリプトが完了するまでに時間がかかる場合は、状況に応じていくつかの条件をポーリングする必要があります。例えば:

window.addEventListener ("load", myMain, false);

function myMain (evt) {
    var jsInitChecktimer = setInterval (checkForJS_Finish, 111);

    function checkForJS_Finish () {
        if (    typeof SOME_GLOBAL_VAR != "undefined"
            ||  document.querySelector ("SOME_INDICATOR_NODE_css_SELECTOR")
        ) {
            clearInterval (jsInitChecktimer);
            // DO YOUR STUFF HERE.
        }
    }
}
45
Brock Adams

script要素は順番に実行されます。 scriptbodyノードがある場合、ブラウザはDOMコンテンツのロードを停止します。これは動作することが保証されています。そうでない場合、document.write()は動作を停止します。

したがって、2つのソリューションがあります。

  1. onloadイベントを使用して、コードをロードします。
  2. スクリプトタグをページの最後の要素として追加します(body要素の最後の要素)。このスクリプトは、他のすべてのスクリプトが終了した後に実行されますおよび本文がDOMツリーに変換された後。
2
Aaron Digulla

Window.loadメソッドを使用します。

function addLoadEvent(a) {
    var b = window.onload;
    "function" != typeof window.onload ? window.onload = a : window.onload = function () {
        b && b(),
            a()
    }
}
function init() {
    alert('init');
}
addLoadEvent(init);
0
STEEL