Расширение Chrome обнаруживает обновление поиска Google

Question

Как мой контент-скрипт может обнаружить обновление поиска Google? Я считаю, что это AJAX-перезагрузка страницы, а не "реальное" обновление, поэтому мои события не обнаружат обновление.

Можно ли как-то обнаружить это как в расширении Google Chrome, так и в дополнении Firefox WebExtensions?

Answer 1

Поиск Google - это динамически обновляемая страница. Существует несколько известных методов обнаружения обновления: MutationObserver, подход на основе таймера (см. Оболочку waitForKeyElements) и событие, используемое сайтом, например pjax:end на GitHub.

К счастью, Google Search в браузере Chrome использует message событие, так вот наш скрипт содержания:

window.addEventListener('message', function onMessage(e) {
    // console.log(e);
    if (typeof e.data === 'object' && e.data.type === 'sr') {
        onSearchUpdated();
    }
});

function onSearchUpdated() {
    document.getElementById('resultStats').style.backgroundColor = 'yellow';
}

Этот метод основан на недокументированной функции сайта, которая не работает, например, в Firefox.

Более надежный метод кроссбраузера, доступный для расширений Chrome и WebExtensions, заключается в отслеживании изменений URL-адресов страницы, поскольку страница результатов поиска Google всегда обновляет свою часть хэша URL-адреса. Нам понадобится фоновая страница / страница события, прослушиватель chrome.tabs.onUpdated и обмен сообщениями:

• background.js

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

• content.js

  chrome.runtime.onMessage.addListener(function(msg, sender, sendResponse) {
      if (msg === 'url-update') {
          onSearchUpdated();
      }
  });
  
  function onSearchUpdated() {
      document.getElementById('resultStats').style.backgroundColor = 'yellow';
  }
  

• manifest.json: объявления страниц фона / событий и скриптов содержимого, "tabs" разрешение