chrome扩展:尽管run_at:document_idle,js脚本也会过早触发

从理论上讲,如果我设置了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显然在页面完全加载之前触发,这样选择器找不到任何东西?

run_at: "document_idle"保证在DOMContentLoaded事件之后执行脚本,该事件表示所有静态 DOM内容都已解析并可用。

如果一个元素尚不存在,这意味着它将在以后通过页面自己的代码动态添加。

显然,Chrome无法预测页面何时(如果有!)处于“已完成”状态。 您需要设置自己的标准(例如“出现#topcard )”。

话虽如此,您的策略应如下:

  1. 检查元素是否已存在。 如果是的话,处理它就完成了。

  2. 为文档中的更改设置侦听器 。 这是通过MutationObserver完成的,为了简单起见,我强烈推荐使用mutation-summary库 。