Chrome扩展：在加载前修改DOM

Question

我的Chrome扩展应该在DOM完全构建之前修改一个DOM元素，并且在最佳情况下，在此DOM元素构建完成后立即进行修改。

例如，如果我在文档中有一个

标签，我希望等待它构建完成，然后直接修改它，而不是在其余DOM构建之前进行修改。

但我只能够在整个DOM构建之前和之后访问DOM，无法在特定元素构建时监听它的构建。

那么我该如何监听特定元素的构建？

- Alexandre Kirszenberg

Answer 1

你可以使用document.addEventListener和DOMNodeInserted事件来进行操作。在节点被构建并插入到DOM之前，你有机会对其进行修改。类似以下的代码应该可以实现。

function nodeInsertedCallback(event) {
  console.log(event);
};
document.addEventListener('DOMNodeInserted', nodeInsertedCallback);

 

- abraham

---

你也可以包含jQuery并使用$(function(){})在DOM创建后，在页面加载之前运行。 - jjNford

谢谢您的帮助。此事件在DOM完全构建之前触发，但它不允许我在内容显示之前修改DOM内容。它只会为脚本动态添加的元素触发。 - Alexandre Kirszenberg

DOMNodeInserted事件已被弃用，请使用Mutation Observers代替。详见这里。 - Ignat

当我测试时，DOMContentLoaded在DOMNodeInserted的事件处理程序之前被调用。 - Markus Knappen Johansson