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

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侦听器和消息传递：

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