Выполнение JavaScript для рендеринга HTML для кэширования серверной стороны

Многие сайты используют AJAX для динамического добавления / отображения / изменения контента. Иногда он используется вместо навигации по сайту, поэтому текущий URL-адрес изменяется программно, а сценарии содержимого в этом случае автоматически не выполняются браузером, так как страница не извлекается с удаленного сервера целиком.

Обычные JS-методы обнаружения изменений страницы, доступные в сценарии контента .

• MutationObserver ( docs ), чтобы буквально обнаружить изменения DOM: Как изменить содержимое HTML, поскольку оно загружается на страницу Производительность MutationObserver для обнаружения узлов во всей DOM .
• Слушатель событий для сайтов, которые изменяют содержание сигнала, отправив событие DOM: pjax:end в document, используемое многими сайтами на основе pjax, например. GitHub, см. Как запустить jQuery до и после загрузки pjax? message на window, используемом, например, Поиск Google в браузере Chrome, см. Расширение Chrome обнаруживает обновление поиска Google spfdone в document, используемое Youtube, см. . Как определить навигацию по страницам на Youtube и изменять HTML до отображения страницы?
• Периодическая проверка DOM с помощью setInterval: Очевидно, что это будет работать только в тех случаях, когда вы ожидаете появления определенного элемента, идентифицированного его идентификатором / селектором, и он не позволит вам универсально обнаруживать новый динамически добавленный контент, если вы не изобрете какой-либо отпечаток существующего содержимого.
• Cloaking API истории внутри инъецированного DOM-скрипта :

  document.head.appendChild(document.createElement('script')).text = '(' +
      function() {
          // injected DOM script is not a content script anymore, 
          // it can modify objects and functions of the page
          var _pushState = history.pushState;
          history.pushState = function(state, title, url) {
              _pushState.call(this, state, title, url);
              window.dispatchEvent(new CustomEvent('state-changed', {detail: state}));
          };
          // repeat the above for replaceState too
      } + ')(); this.remove();'; // remove the DOM script element
  
  // And here content script listens to our DOM script custom events
  window.addEventListener('state-changed', function(e) {
      console.log('History state changed', e.detail, location.hash);
      doSomething();
  });
  

• Прослушивание hashchange , popstate событий:

  window.addEventListener('hashchange', function(e) {
      console.log('URL hash changed', e);
      doSomething();
  });
  window.addEventListener('popstate', function(e) {
      console.log('State changed', e);
      doSomething();
  });
  

Специфические расширения: обнаружение изменений URL на странице background / .

Для работы с навигацией существует расширенный API: webNavigation , webRequest , но мы будем использовать простой chrome.tabs.onUpdated прослушиватель событий, который посылает сообщение к скрипту содержимого:

• manifest.json: declare background / event page объявить скрипт содержимого добавить "tabs" разрешено .
• background.js

  var rxLookfor = /^https?:\/\/(www\.)?google\.(com|\w\w(\.\w\w)?)\/.*?[?#&]q=/;
  chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
      if (rxLookfor.test(changeInfo.url)) {
          chrome.tabs.sendMessage(tabId, 'url-update');
      }
  });
  

• content.js

  chrome.runtime.onMessage.addListener(function(msg, sender, sendResponse) {
      if (msg === 'url-update') {
          doSomething();
      }
  });