Chrome 扩展：在加载之前修改 DOM答案

【问题标题】：Chrome Extension : Modify DOM before loadingChrome 扩展：在加载之前修改 DOM
【发布时间】：2023-03-11 11:14:01
【问题描述】：

我的 Chrome 扩展程序应该在 DOM 完全构建之前修改一个 DOM 元素，最好的情况是在这个 DOM 元素构建之后。

例如，如果我的文档中有a，我想等到它构造好，然后直接修改它，然后再构造其余的DOM。

但我只在构造元素之前和构造整个 DOM 之后才设法访问 DOM。

那么我如何听一个特殊元素的构造呢？

【问题讨论】：

【解决方案1】：

您可以将document.addEventListener 与DOMNodeInserted 事件一起使用。节点将被构建，您将有机会在将它们插入 DOM 之前对其进行修改。像下面这样的东西应该可以工作。

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

【讨论】：

您还可以包含 jQuery 并使用 $(function(){}) 在创建 DOM 之后，在页面加载之前运行。
感谢您的帮助。此事件在 DOM 完全构建之前触发，但它不允许我在 DOM 内容显示之前对其进行修改。它只触发脚本动态添加的元素。
不推荐使用 DOMNodeInserted 事件。请改用[变异观察者][1]。 [1]：developer.mozilla.org/en-US/docs/Web/API/MutationObserver
当我测试这个 DOMContentLoaded 在 DOMNodeInserted 的事件处理程序之前被调用