javascript - 在页面显示到屏幕之前删除 DOM 元素(在 Chrome 扩展中)

Question

我正在尝试创建一个扩展，该扩展将在页面显示到屏幕之前摆脱某些页面元素(通过 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？

Answer 1

使用MutationObserver在 document_start 处注入(inject)的内容脚本中，在页面加载期间实际从 DOM 中删除 HTML 元素，然后再呈现它们，这样就不会出现闪烁。

• list .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
}

• content.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,
  });
}

注意事项:

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