如何在页面的Javascript执行后加载内容脚本？

Question

我的扩展应该加载一个内容脚本searchTopic.js,只有在它注入的页面已经完全加载之后(是的,我已经在扩展清单中将"run_at"设置为"document_end"),但实际上它在加载之前已经创建了所有DOM对象(关键的对象是通过页面中的一些Javascript创建的).所以,问题是,我怎么能等到页面的Javascript执行完毕？这是我的清单:

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

Answer 1

"run_at": "document_end"相当于DOMContentLoaded. 也就是说,它在加载静态 HTML 之后触发,但在慢速图像和慢速完成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.
        }
    }
}

Answer 2

script元素按顺序执行。如果script.body​ 这保证可以工作，否则document.write()将停止工作。

所以你有两个解决方案：

1. 使用该onload事件加载您的代码。
2. 添加脚本标签作为页面的最后一个元素（body元素中的最后一个元素）。该脚本将在所有其他脚本完成且正文转换为 DOM 树后执行。