在 chrome 扩展中，如何监听由内容脚本动态生成的页面的事件？答案

【问题标题】：In chrome extension, how to listen for events for a page that is dynamically generated by the content script?在 chrome 扩展中，如何监听由内容脚本动态生成的页面的事件？
【发布时间】：2013-12-30 11:56:06
【问题描述】：

我已经使用内容脚本在 chrome 扩展中注入了一个 html 文件。现在我需要监听该页面元素的事件。那么我该怎么做呢？我应该在内容脚本中还是在单独的 javascript 文件中编写代码？

【问题讨论】：

“使用内容脚本在 chrome 扩展中注入 html 文件”是什么意思？注入对于将脚本注入并可能将自定义 DOM 元素生成到 3-d 派对内容而不是您自己的扩展中是有意义的。
脚本已经被注入，通过使用该脚本，我带来了另一个 html 文件的内容，然后将其附加到浏览器中的当前文档中。这就是我所说的注入的意思。
好的。将某些事件绑定到元素有什么问题？因为您已经有了内容脚本，所以就在那儿做吧。
嗯，问题是，我不知道我应该在哪个“窗口”事件下监听我的元素？我尝试了 window.onLoad 但随后获取我的元素给出了 null。
我认为您的问题不在于绑定目标（window 元素），而在于它的执行顺序。您没有显示任何代码（这对回答您的问题非常有帮助），但我怀疑您在默认的run_at 时刻加载您的内容脚本，即document_idle。是否可能在加载外部 html 之前发生空闲？尝试使用document_end，并显示您的代码。

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

【解决方案1】：

您可以使用 Mutation Observers 侦听内容脚本中的事件。 https://developer.mozilla.org/en/docs/Web/API/MutationObserver

【讨论】：

请注意，突变观察者会观察 DOM 的变化，而不是元素的值。因此，您可以观察 textarea 以查看是否向该元素添加了属性，但您无法查看该 textarea 以查看其值是否发生变化。