Как ждать загрузки скриптов - PullRequest
Новая
       1

Как ждать загрузки скриптов

0 голосов
/ 21 февраля 2019

Я создаю расширение Chrome, и в моем contentScript у меня есть функция, которая зацикливает все элементы <link> и проверяет, имеет ли он атрибут rel="preconnect".Если true, значок расширения изменится.

ContentScript запускается при запуске документа и функции.Функция работает onDomLoaded.Когда предварительный рендер находится непосредственно в HTML-коде, расширение работает отлично.Однако, когда JS генерирует prerender, значок не изменится.Возможно, потому что скрипт не полностью загружен, когда происходит onDomLoaded.

Однако, когда я вместо этого использую window.onload, он действительно медленный, и значок меняется с задержкой, потому что он ожидает полной загрузки скриптов.Как справиться с этой ситуацией и ждать только при необходимости?

Манифест 

content_scripts":
    [{
     "matches": ["https://*/*"],
     "run_at": "document_start",
     "js": ["js/contentScript.js"]
   }]

ContentScript 

document.addEventListener("DOMContentLoaded", function(event) {
       //here I loop the page and if preconnect found, change the icon

    )};

1 Ответ

0 голосов
/ 21 февраля 2019

Подходящим инструментом для этой задачи является MutationObserver, который отслеживает модификации DOM.

Поскольку MutationObserver в document_start может замедлять страницу (даже если немного), мы будем наблюдать только элемент <head>, который очень быстрый из-за небольшого количества элементов там. 

// there's no HEAD yet at document-start, let's wait until we have it
new MutationObserver((mutations, observer) => {
  if (document.head) {
    observer.disconnect();
    monitorLinks();
  }
}).observe(document.documentElement, {childList: true});

function monitorLinks() {
  const onMutation = mutations => {
    for (const {addedNodes} of mutations) {
      for (const n of addedNodes) {
        if (n.nodeName === 'LINK' && n.rel === 'preconnect') {
          processLink(n);
        }
      }
    }
  };
  // the HEAD may have some children already
  onMutation([{
    addedNodes: document.getElementsByTagName('link'),
  }]);
  // watch for the newly added children of HEAD
  new MutationObserver(onMutation).observe(document.head, {childList: true});
}

function processLink(link) {
  console.log(link);
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...