Question

我的内容脚本如何检测Google搜索的刷新？我相信这是一个AJAX重新加载的页面而不是“真正的”刷新，所以我的事件不会检测到刷新。

是否可以在Google Chrome扩展程序和Firefox WebExtensions插件中以某种方式检测到它？

Answer 1

Google搜索是一个动态更新的页面。有几种众所周知的方法可用于检测更新：MutationObserver，基于计时器的方法（请参阅waitForKeyElements包装器），以及网站使用的事件，如pjax：end on GitHub。

幸运的是，Chrome浏览器中的Google搜索使用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提供的更可靠的crossbrowser方法是监控页面网址更改，因为Google搜索结果页面始终会更新其网址哈希部分。我们需要background/event page，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：background/event page和content script声明，"tabs" permission。

Chrome扩展程序会检测Google搜索刷新

1 个答案: