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

我正在尝试创建一个扩展，在页面显示到屏幕之前，它将删除某些页面元素（按id或类）。我曾尝试在文档上使用事件监听器，将“DOMContentLoaded”作为事件，但javascript似乎在页面显示给用户后执行，然后将其删除，因此它不像我希望的那样平滑（根本不显示不需要的内容）

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

在

document\u start

注入的内容脚本中使用，以便在页面加载期间，在呈现HTML元素之前，从DOM中实际删除HTML元素，从而避免闪烁

• manifest.json：

• content.js：

注:

• 观察者回调必须简单快速，以避免在页面加载期间引入延迟，因此使用简单选择器和直接DOM访问，而不是jQuery
• 工作完成后，最好立即断开观察者的连接，这样页面的其余部分就不会被不必要的观察到
• 不要添加多个观察者，将所有检查合并到一个观察者中

• 突变

  数组还包含添加的元素本身。这就是为什么我们要确保标记名

  存在的原因-这意味着节点是一个元素

• 例如，每个变异的

  addedNodes

  数组通常都有容器元素，如

  DIV

  ，而容器元素中又可能有我们想要删除的元素。因此，我们必须使用

  querySelector

  或

  queryselectoral

  来检查它
• 从Chrome 23开始工作

---

考虑注入样式以在渲染之前隐藏这些元素。否则，您不能做很多事情，因为您需要加载dom才能找到它们removal@charlietfl我试试看。我在想，我可能必须从这里使用一些东西，然后尝试以某种方式拦截和更改html@charlietflcss必须硬编码到css文件中，对吗？（不能在选项中设置，因为这需要javascript退出）我想我必须截取html请求，修改它，然后以某种方式传递它，但这完美地解决了我的问题！答案也是如此完整，我还需要一段时间才能问更多的问题！

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);

});

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

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) {
  const toRemove = [];
  for (const {addedNodes} of mutations) {
    for (const n of addedNodes) {
      if (n.tagName) {
        if (n.matches(DEL_SELECTOR)) {
          toRemove.push(n);
        } else if (n.firstElementChild && n.querySelector(DEL_SELECTOR)) {
          toRemove.push(...n.querySelectorAll(DEL_SELECTOR));
        }
      }
    }
  }
  if (toRemove.length) {
    mo.disconnect();
    for (const el of toRemove) el.remove();
    observe();
  }
}

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