Gmail Chrome 扩展程序和 document.readyState答案

【问题标题】：Gmail Chrome Extension and document.readyStateGmail Chrome 扩展程序和 document.readyState
【发布时间】：2015-03-09 16:57:18
【问题描述】：

我正在为 gmail 创建一个 chrome 扩展程序，当某些页面对象加载时，我发现一些奇怪的不稳定性。由于我正在尝试修改 GMAIL DOM（为我的扩展自定义它），因此需要在我的初始化程序运行之前完全加载它。我的扩展总是在 DOM 完全加载之前初始化好，所以我需要一种方法让它轮询，直到 DOM 完全形成来做它的事情。

我曾尝试使用 document.readyState 来轮询文档，以便知道何时开始修改完全加载的 DOM，但它并不总是有效。

一旦页面开始加载，我将每 100 毫秒轮询一次的 document.readyState 打印输出放入控制台，我注意到在 DOM 完全加载之前，大约 1/10 的页面加载 document.readyState 变为“完成”。我可以告诉这一点，因为我为 GMAIL 撰写按钮做了一个 jQuery 选择器，当发生这种情况时它是空的，并且每隔一次按预期找到它（它会找到撰写按钮）。

为什么会这样？有没有更好的方法让我的扩展程序初始化脚本检查以确保在触发 DOM 模块之前完全加载 DOM？

编辑—— 我有检查 document.readyState 的脚本作为内容脚本注入到 UI 中。

【问题讨论】：

如果您正在等待撰写按钮出现，为什么不轮询该按钮而不是 document.readyState ？ readyState 和那个按钮之间没有保证的关系......

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

【解决方案1】：

document.readyState 的代码应位于内容脚本中。

后台和弹出页面引用的文档不是网页的。

更多信息在这里：https://developer.chrome.com/extensions/overview#arch

【讨论】：

我与 gmail DOM 交互并使用 document.readyState 知道何时激活的代码都位于内容脚本中。我根本不使用这个 chrome 扩展的背景或弹出页面。

【解决方案2】：

Gmail 网站是动态的。 readyState / DOMContentLoaded 和朋友们都相当无用，因为大多数 UI 都是动态构建的，而不是在“初始”DOM 中。这正是您所观察到的。

您需要像 RobW 提到的那样轮询撰写按钮，或者注意使用 MutationObserver events 添加它。另外值得注意的是mutation-summary library。

【讨论】：

要等到元素存在进行初始化，我建议轮询（使用 setTimeout）通过 MutationObservers，因为它执行得更好。
@RobW 我想这取决于您需要多快做出反应。如果只使用一次 MO（然后断开连接），页面仍然会变慢吗？
断开连接的突变观察者从不放慢速度（突变事件确实如此）。但是，尤其是在构建 Gmail 等动态页面时，会非常频繁地触发 Mutation Observers。由于 OP 的目标是在呈现撰写按钮时最终运行一些逻辑，因此重复轮询按钮就足够了。例如超时250 毫秒足以及时（瞬间）检测到按钮。
大家好，这是很棒的东西，谢谢！在我知道已加载 jQuery 以按照您的建议检查按钮是否存在后，我最终使用了 jQuery 选择器，并进行了 100 毫秒的轮询。这似乎工作正常并且不会减慢页面加载速度，但我想知道为什么我可以使用 MO 代替？
在最坏的情况下（在您轮询后添加节点），您的代码将在添加按钮后等待约 100 毫秒。从用户的角度来看，这几乎是不可察觉的，但有时您可能需要立即做出反应。 MO 在 DOM 修改后立即触发，因此没有延迟。 Rob 的建议意味着 MO 会在 Gmail 打开场景中触发太多次，因此会减慢它。