猿问

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

这是我的配置:


  "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 文件不起作用。


我怎样才能做到?(在火狐浏览器中测试)


噜噜哒
浏览 129回答 1
1回答

慕哥6287543

"run_at": "document_start"在内容脚本声明中是绝对必要的。内容脚本将在页面为空时运行,因此我们还需要以下内容之一:使用MutationObserveron观察正在构建的页面document,例如,检查添加的节点并隐藏与 id 列表匹配的节点。或者构造一个style带有选择器的元素来隐藏。在性能方面,它的速度要快几个数量级。也更简单。hideSelectors([&nbsp; '#s_top_wrap',&nbsp; '#bottom_layer',&nbsp; '#lm-new',&nbsp; '#s-top-left',&nbsp; '#u1',&nbsp; '#s-hotsearch-wrapper',&nbsp; '#s_side_wrapper',]);function hideSelectors(sels) {&nbsp; const el = document.createElement('style');&nbsp; el.textContent = sels.join(',') + '{ display: none !important }';&nbsp; // there's no <head> at this point so we're adding to <html>&nbsp; // which is allowed in DOM despite violating the HTML specification&nbsp; document.documentElement.appendChild(el);}
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答