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

Question

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

是否可以在 Google Chrome 扩展和 Firefox WebExtensions 附加组件中以某种方式检测到它？

Answer 1

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

幸运的是，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 可用的更可靠的跨浏览器方法是监视页面 URL 更改，因为 Google 搜索结果页面始终更新其 URL 哈希部分。我们需要一个背景/事件页面、chrome.tabs.onUpdated监听器和消息传递：

• 背景.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');
      }
  });
  

• 内容.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" 权限。