Javascript chrome扩展：js脚本启动太早，尽管在：document\u idle运行

理论上，如果我将run_设置为，我用来选择页面上元素的.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\u at:“document\u idle”

保证脚本在

DOMContentLoaded

事件之后执行，该事件表示所有静态DOM内容都已解析并可用

如果一个元素还不存在，这意味着它将在稍后由页面自己的代码动态添加

显然，Chrome无法预测页面何时（如果有的话！）处于“完成”状态。您需要设置自己的标准（如“当

#topcard

出现时”）

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

检查元素是否已经存在。如果存在，请处理它，然后完成

设置一个。这是通过

MutationObserver

s完成的，为了简单起见，我强烈建议使用

run\u at:“document\u idle”

保证脚本在

DOMContentLoaded

事件之后执行，该事件表示所有静态DOM内容都已解析并可用

如果一个元素还不存在，这意味着它将在稍后由页面自己的代码动态添加

显然，Chrome无法预测页面何时（如果有的话！）处于“完成”状态。您需要设置自己的标准（比如“何时出现

#topcard

）

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

检查元素是否已存在。如果有，处理它，你就完成了

建立一个。这是通过

MutationObserver

s完成的，为了简单起见，我强烈建议使用

---

topcard是如何创建的？动态的？这也许可以解释为什么它不存在于document\u idle您是否尝试过

document\u end

？正如@Cornwell所说，“topcard可能是动态创建的，如果您可以提供网页url，这将非常有帮助。一方面，请不要发布两次问题，Haibara是正确的：您可能应该编辑现有的问题，除非它已经得到了回答。另一方面，这不是一个完全相同的问题，这实际上是一个更清晰的问题。我的建议是删除旧问题。topcard是如何创建的？动态的？这也许可以解释为什么它不存在于document\u idle您是否尝试过

document\u end

？正如@Cornwell所说，“topcard可能是动态创建的，如果您可以提供网页url，这将非常有帮助。一方面，请不要发布两次问题，Haibara是正确的：您可能应该编辑现有的问题，除非它已经得到了回答。另一方面，这不是一个完全相同的问题，这实际上是一个更清晰的问题。我的建议是删除旧问题。