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

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

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

Ответ 1

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

К счастью, Google Поиск в браузере Chrome использует событие message, поэтому наш контент script:

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, например.

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

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: фон/страница событий и контент script, "tabs" permission.