在页面显示到屏幕之前删除 DOM 元素（在 Chrome 扩展中）

我正在尝试创建一个扩展，该扩展将在页面显示到屏幕上之前删除某些页面元素（按 id 或类）。我尝试在文档上使用事件侦听器，以“DOMContentLoaded”作为事件，但 javascript 似乎在页面显示给用户后执行，然后删除它，所以它不像我想要的那么顺利（不显示不需要的内容根本）

document.addEventListener("DOMContentLoaded", function() {

var elements = document.getElementsByClassName("header-nav-item");
while(elements.length > 0){
    elements[0].parentNode.removeChild(elements[0]);
}

var element = document.getElementById("topchapter");
element.parentNode.removeChild(element);
element = document.getElementById("wrapper_header");
    element.parentNode.removeChild(element);

});

这是我的扩展使用的内容脚本，该脚本在页面加载后删除。在用户看到页面之前，我需要使用什么来修改 DOM？

Use 变异观察者 https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver在注入的内容脚本中document_start在页面加载期间在渲染 HTML 元素之前从 DOM 中实际删除它们，这样就不会出现闪烁。

• 清单.json：

{
  "name": "Delete elements",
  "version": "1.0",
  "content_scripts": [
    {
      "matches": ["*://somesite.com/*"],
      "run_at": "document_start",
      "all_frames": true,
      "js": ["content.js"]
    }
  ],
  "manifest_version": 2
}

• 内容.js：

const DEL_SELECTOR = '.header-nav-item, #topchapter, #wrapper_header';

const mo = new MutationObserver(onMutation);
// in case the content script was injected after the page is partially loaded
onMutation([{addedNodes: [document.documentElement]}]);
observe();

function onMutation(mutations) {
  let stopped;
  for (const {addedNodes} of mutations) {
    for (const n of addedNodes) {
      if (n.tagName) {
        if (n.matches(DEL_SELECTOR)) {
          stopped = true;
          mo.disconnect();
          n.remove();
        } else if (n.firstElementChild && n.querySelector(DEL_SELECTOR)) {
          stopped = true;
          mo.disconnect();
          for (const el of n.querySelectorAll(DEL_SELECTOR)) el.remove();
        }
      }
    }
  }
  if (stopped) observe();
}

function observe() {
  mo.observe(document, {
    subtree: true,
    childList: true,
  });
}

Notes:

• 观察者回调必须简单且快速，以免在页面加载期间引入滞后，因此请使用简单的选择器和直接 DOM 访问而不是 jQuery。
• 工作完成后，最好立即断开观察者的连接，这样就不会不必要地观察页面的其余部分。
• 不要添加多个观察者，将所有检查合并到一个观察者中
• mutations数组还包含文本子节点 https://developer.mozilla.org/en-US/docs/Web/API/Text以及添加的元素本身。这就是为什么我们确保tagName存在 - 这意味着该节点是一个元素。
• 每个突变的addedNodes数组通常具有容器元素，例如DIV例如，其中可能有一个我们想要删除的元素。所以我们必须检查它querySelector or querySelectorAll.
• childNode.remove() https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove自 Chrome 23 起可用