chrome扩展程序：尽管运行了at：document_idle，js脚本仍过早触发

Question

从理论上讲，如果我设置run_at，则在页面完全加载后应该会触发用于选择页面上元素的.js。 但事实并非如此。

在我的content.js中，我有

    "content_scripts": [
        {
          "js": ["extensions/jquery-2.2.2.min.js", "content.js"],
          "run_at": "document_idle"
        }
      ]

在我的content.js中，我只是拥有：

alert("alert");
console.log("hello");
var fullname2 = $('#topcard').find('.profile-info').find('h1').text();
console.log(fullname2);

警报和第一个console.log均有效。 第二个控制台日志不记录任何内容，因为选择器无法选择任何内容。 我知道这是因为，如果我为content.js代码块添加setTimeout并等待2秒钟，则第二个控制台日志会正确显示fullname2。

知道为什么content.js显然在页面完全加载之前就被触发了，从而使选择器找不到任何东西吗？

Answer 1

run_at: "document_idle"保证脚本在DOMContentLoaded事件之后执行，该事件表明所有静态 DOM内容均已解析且可用。

如果元素尚不存在，则意味着稍后将通过页面自己的代码动态添加该元素。

显然，Chrome无法预测页面何时（如果有！）处于“完成”状态。 您需要设置自己的条件（例如“当#topcard出现时）。

话虽如此，您的策略应如下：

1. 检查元素是否已经存在。 如果是这样，请对其进行处理即可。

2. 为文档中的更改设置一个侦听器 。 这是通过MutationObserver完成的，为简化起见，我强烈建议您使用“ mutation-summary库 。