chrome扩展:尽管运行了at:documentidle，js脚本还是过早启动

chrome extension: the js script fires too early despite run_at: document_idle

本文关键字：脚本 js 启动 documentidle 扩展 运行 at chrome      更新时间：2023-09-26

理论上，如果我设置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. 为文档中的更改设置侦听器。这是通过MutationObservers完成的，为了简单起见，我强烈推荐使用mutation-summary库。

相关文章：