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

Question

我需要在我的扩展中 DevTool 控制台的元素 window 中找到的相同源。我尝试使用内容脚本

var text = document.documentElement.innerHTML;

在从 chrome.tabs.onUpdated.addListener 捕获到 "complete" 状态后注入，但我只收到 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 来检测何时创建了所需的元素。