如何在浏览器扩展加载页面之前执行js文件？

Question

这是我的配置：

  "content_scripts": [
    {
      "matches": ["https://www.baidu.com/"],
      "js": ["./baidu/baidu.js"]
    }
  ]

这是我的 baidu.js

  // #region delete useless DOM
  const deleteIdList = [
    '#s_top_wrap',
    '#bottom_layer',
    '#lm-new',
    '#s-top-left',
    '#u1',
    '#s-hotsearch-wrapper',
    '#s_side_wrapper'
  ];
  deleteIdList.forEach(v => {
    const element = document.querySelector(v);
    element.style.display = 'none';
    // element.parentNode.removeChild(element);
  });

我想要的很简单，我只希望在访问baidu.com时，可以删除（或隐藏）无用的dom。我的问题是我的配置有效，但无用的 dom 会在开始时闪烁。然后那些消失了。我希望当我看到网页时，一切都好。

我尝试将属性 run_at 指定为 document_start。然后我的 js 文件不起作用。

我怎样才能做到？（在 FireFox 浏览器中测试）

Answer 1

"run_at": "document_start" 在内容脚本声明中是绝对必须的。
当页面为空时，内容脚本将运行因此我们还需要以下之一：

观察在document、上使用MutationObserver构建的页面，检查添加的节点并隐藏与ids列表匹配的节点。

或构造一个 style 元素，其中包含要隐藏的选择器。
在性能方面，它的速度快了几个数量级。也更简单。

hideSelectors([
  '#s_top_wrap',
  '#bottom_layer',
  '#lm-new',
  '#s-top-left',
  '#u1',
  '#s-hotsearch-wrapper',
  '#s_side_wrapper',
]);

function hideSelectors(sels) {
  const el = document.createElement('style');
  el.textContent = sels.join(',') + '{ display: none !important }';
  // there's no <head> at this point so we're adding to <html>
  // which is allowed in DOM despite violating the HTML specification
  document.documentElement.appendChild(el);
}

如何在浏览器扩展加载页面之前执行js文件？

How to execute js file before page loaded in browser extension?

javascript

firefox-addon

google-chrome-extension