Chrome扩展程序检测到Google搜索刷新 [英] Chrome extension detect Google search refresh

问题描述

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

是否有可能在Google Chrome浏览器扩展程序和Firefox WebExtensions附加程序中以某种方式检测它？

解决方案

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

幸运的是，Chrome浏览器中的Google搜索使用消息事件，所以这里是我们的内容脚本：

  window.addEventListener（'message'，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可用的更可靠的交叉浏览器方法是监控网页网址更改，因为Google搜索结果页始终更新其网址哈希部分。我们需要一个 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：背景/活动页面和内容脚本声明，标签 许可。

How can my content script detect a refresh of Google's search? I believe it is an AJAX reload of the page and not a "real" refresh, so my events won't detect the refresh.

Is it possible to detect it somehow in both a Google Chrome extension and a Firefox WebExtensions add-on?

解决方案

Google search is a dynamically updated page. Several well-known methods exist to detect an update: MutationObserver, timer-based approach (see waitForKeyElements wrapper), and an event used by the site like pjax:end on GitHub.

Luckily, Google Search in Chrome browser uses message event, so here's our content 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';
}

This method relies on an undocumented site feature which doesn't work in Firefox, for example.

A more reliable crossbrowser method available to Chrome extensions and WebExtensions is to monitor page url changes because Google Search results page always updates its URL hash part. We'll need a background/event page, chrome.tabs.onUpdated listener, and 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 and content script declarations, "tabs" permission.

这篇关于Chrome扩展程序检测到Google搜索刷新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！