如何在瀏覽器擴展中加載頁面之前執行 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 一開始會是 flash。 然后那些消失了。 我希望當我看到 web 時，一切都好。

我試圖將屬性run_at指定為document_start 。 然后我的 js 文件不起作用。

我怎樣才能做到？ （在 FireFox 瀏覽器中測試）

Answer 1

"run_at": "document_start"在內容腳本聲明中是絕對必須的。
內容腳本將在頁面為空時運行，因此我們還需要以下內容之一：

觀察在document上使用MutationObserver構建的頁面，例如，檢查添加的節點並隱藏那些與 id 列表匹配的節點。

或者構造一個帶有選擇器的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 文件？

問題描述

1 個解決方案

解決方案1
1 已采納 2020-06-21 06:57:26

如何在瀏覽器擴展中加載頁面之前執行 js 文件？

問題描述

1 個解決方案

解決方案1 1 已采納 2020-06-21 06:57:26

解決方案1
1 已采納 2020-06-21 06:57:26