Javascript 从Chrome扩展生成的输出HTML

在我的Chrome扩展中，我有一个内容脚本，可以运行并输出页面的初始源代码HTML<代码>（如查看源代码中所示）只需使用

document.documentElement.innerHTML

但我需要的是生成的源代码（所有JavaScript执行完毕后的源代码/当前DOM[如INSPECT元素中所示]），我已经阅读了各种网站，以及与此相关的问题，但他们只从外部源代码的请求而不是chrome扩展的角度讨论了这一点。我读过的一些不同的选择是：

• 通过服务器上托管的虚拟浏览器运行url，查看浏览器如何解释源并返回生成的源
• 从初始源代码中刮取页面，以某种方式侦听并记录所有JavaScript执行，然后在初始源代码上执行这些命令，尝试重新创建生成的源代码

由于Chrome扩展的内容脚本可能在OpenTab的页面中并行运行，有没有更简单/更高效的解决方案？我是否可以等待所有初始JavaScript完成执行，然后获取当前DOM或源代码

注意：在执行任何额外的JavaScript命令后，我不需要跟踪DOM。我只需要在每次加载页面时执行的JavaScript完成后创建一个快照

如果这听起来很幼稚，我提前道歉，我对chrome的扩展还不熟悉。如果您有任何链接到好的资源、教程或示例，我们将不胜感激

---

感谢您抽出时间。

您的内容脚本何时运行/注入（即在页面加载的哪个阶段）？是什么让您认为

document.documentElement.innerHTML

不会返回“生成的源代码”？您是否遇到过它返回不同内容的情况？我的内容脚本在“document_end”（所有静态HTML加载完成后）运行。这会导致在调用我的内容脚本后，几乎所有动态加载的内容都被加载。目前，我通过添加一个侦听器并等待加载我要查找的元素，使代码正常工作。。。但是这会稍微降低页面的加载速度；我只是想知道是否有一种更有效的方法。也可以针对您的特定点引用生成的源。。。因为在这种情况下，我能找到的最佳清单

run\u at

属性是

document\u end

，所以我不得不选择那个。由于

document\u end

是在静态HTML加载完成和加载图像和JavaScript函数调用等缓慢过程开始之间调用的。。。DOM“快照”处于初始状态，而不是在生成正确的内容之后。即使从技术上讲，我可以使用相同的调用来获取生成的内容，但我只需要等待加载该内容，然后再进行get调用。“document\u end”如何成为

run\u at

属性的“最佳值”？默认的“document\u idle”似乎更合适。在任何情况下，如果您希望能够等待动态、异步加载的内容，那么除了侦听DOM更改之外，没有其他解决方案。我非常怀疑（如果操作得当）这会减慢页面加载过程。/（正如您所声称的）。这肯定是一个可行的解决方案。然而，我可能会选择“document_start”并使用一个

MutationObserver

，而不是效率较低的

setInterval

（当然，这一切都取决于您的具体要求）。