Как выполнить файл js перед загрузкой страницы в расширении браузера? - PullRequest
Новая
       112

Как выполнить файл js перед загрузкой страницы в расширении браузера?

0 голосов
/ 21 июня 2020

Вот моя конфигурация: 

  "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, бесполезный дом можно удалить (или скрыть). Моя проблема в том, что моя конфигурация работает, но бесполезный дом вначале будет мигать sh. Затем они исчезают. Надеюсь, когда я увижу Интернет, все будет в порядке.

Я попытался указать атрибут run_at как document_start. Тогда мой js файл не работает.

Как сделать? (Проверено в браузере FireFox)

1 Ответ

1 голос
/ 21 июня 2020

"run_at": "document_start" в объявлении сценария содержимого абсолютно необходимо для этого. Сценарий содержимого будет запускаться, когда страница пуста, поэтому нам также понадобится одно из следующего:

  • наблюдать, как создается страница, используя MutationObserver в примере document, , проверьте добавленные узлы и скройте те, которые соответствуют списку идентификаторов.

  • или создайте элемент 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);
}
...