检查 Google Chrome 扩展中的 DOM 元素答案

【问题标题】：Check DOM element in Google Chrome Extension检查 Google Chrome 扩展中的 DOM 元素
【发布时间】：2011-10-03 17:01:03
【问题描述】：

我正在尝试制作一个简单的 Google Chrome 扩展程序 - 比如在页面上查找特定元素并显示警报。

我的问题是特定页面加载速度相对较慢（后面还有一些 AJAX）。

如何仅在所有页面加载完毕后进行检查？

我在清单文件中尝试了"run_at" : "document_idle"，但没有成功。它会在整个页面加载之前向我显示消息。

我正在考虑每隔一秒（或其他时间）检查整个 DOM 元素，但这是一个可行的解决方案吗？我认为它会减慢页面速度...

谢谢。

【问题讨论】：

标签： javascript dom google-chrome google-chrome-extension

【解决方案1】：

如果当您单击“查看源代码”时该元素在页面上不存在，那么捕获它的一种方法是监听DOMSubtreeModified 事件，该事件会在每次修改 DOM 时触发：

document.addEventListener("DOMSubtreeModified", function(event){
        if(document.getElementById("my_element")) {
                //element is added
        }
});

【讨论】：

感谢您的信息。我的页面使用 AJAX 加载了很多元素。所以这真的减慢了我的页面。对于添加的每个元素，脚本都会运行。我可以将其限制为，比如说，仅在添加元素（div、文本字段、...）时？
@Parkyprg 还有DOMNodeInserted 事件。但我不明白为什么这会减慢页面速度。您不应在此事件处理程序中运行任何脚本，只需检查元素是否已在页面上。如果是 - 那么你运行你的脚本一次（有一些标志或其他东西）。

【解决方案2】：

您是否尝试将代码放入“content_script.js”中的 window.onload 事件中？

window.onload = function() {
   // your code
};

【讨论】：

它不起作用。这会在窗口加载时触发，但在使用 AJAX 更新所有元素之前。