如何从Chrome扩展程序中的网站获取完整加载的HTML源代码

Question

我需要在我的扩展程序中的DevTool控制台的Elements窗口中找到相同的源代码。我尝试使用内容脚本

var text = document.documentElement.innerHTML;

从chrome.tabs.onUpdated.addListener获取“完成”状态后注入

，但我只收到了没有动态创建内容的html代码。

特别是我希望我的扩展程序能够找到动态添加的所有“div”。

任何帮助将不胜感激！

Answer 1

加载初始页面内容后，complete事件将触发。它与动态生成的内容无关，否则必须无限期等待，因为以后可能总是会添加更多内容。

如果您对特定元素感兴趣，可以使用setTimeout定期轮询该元素。像这样：

function getElement() {
    return new Promise(function(res, rej) {
        var interval = setInterval(function() {
            var elm = document.getElementById('the-element-you-want');
            if(elm){
                clearInterval(interval);
                res(elm);
            }
        }, 10);
    });
}

另一种选择是使用MutationObserver来检测何时创建了所需的元素。