javascript - 如何同时使用onUpdated和onActivated？

在我的扩展程序中，我在background.js中有一个onUpdated侦听器，该侦听器将XHR和XPath的某些数据提取到badgeText中。

但是，如果我激活了一个旧选项卡却不执行任何操作，只需单击选项卡栏中的选项卡，就不会触发onUpdated，并且我已经从先前打开的选项卡中获取了徽章数据。

旧标签为discarded，也会发生类似情况。如果我单击选项卡栏中的选项卡（同样，不执行任何操作），则不会触发onUpdated。

onUpdated似乎没有涵盖选项卡的激活。

如何同时使用onUpdated和onActivated覆盖我描述的事件？还是有其他方法可以捕获选项卡的事件，而我只是单击选项卡栏中的选项卡？

我想将我的XHR和setBadgeText动作绑定到onUpdated和onActivated上，因此简单地单击选项卡栏中的选项卡也会触发。在其他情况下，我应强制扩展程序的用户手动刷新页面以获取新数据。

PS：这是background.js

var currentDomain = "";
var currentHost = "";
var currentFullpath = "";
var currentUrl = "";
var currentFolder = "";
var badgeText = "";

chrome.tabs.onUpdated.addListener(function(tabid, changeInfo, tab){
    chrome.tabs.query({'active' : true, 'currentWindow': true}, function(tabs){
        if( ! (tabs.length == 0)){
          let newUrl = new URL(tabs[0].url);
          currentHost = newUrl.host;
          currentUrl = tabs[0].url;
          currentFullpath = currentUrl.substring(0, currentUrl.lastIndexOf("/"));
          currentFolder = currentUrl.split("/");
          parsed = psl.parse(currentHost);
          currentDomain = parsed.domain;



  chrome.storage.sync.get('savedApi', ({savedApi}) => {

console.log("savedApi: "+savedApi);

if(savedApi == null)
          savedApi = 'de';
if(currentDomain == null)
          return false;
if(currentUrl == null)
          return false;

        var xhr = new XMLHttpRequest();
        var protocol = "https://";
        var middle = ".myservice.com/seo/__loadModule/domain/"
        var end = "/mobile/1/_action/_data_visindex_normal/";

console.log("xhr: "+xhr);

        xhr.open("GET", protocol+savedApi+middle+currentDomain+end, true);

        xhr.responseType='document';



         xhr.onreadystatechange = function() {

          if (this.readyState == 4) {



            function getElementByXpath(path) {
            return xhr.response.evaluate(path, xhr.response, null, XPathResult.STRING_TYPE, null).stringValue;
            }

            badgeText = getElementByXpath("normalize-space(//div[@class='data']/span[@class='value']/text())");

console.log("newUrl: "+newUrl);
console.log("currentHost: "+currentHost);
console.log("currentUrl: "+currentUrl);
console.log("currentFullpath: "+currentFullpath);
console.log("currentFolder: "+currentFolder);
console.log("currentDomain: "+currentDomain);

            chrome.browserAction.setTitle({title: "Mobile visibility of "+currentDomain+" is "+ String(badgeText)});
            chrome.browserAction.setBadgeText({text: String(badgeText)});
            chrome.browserAction.setBadgeBackgroundColor({ color: '#1d2554' });


           }
        }
        xhr.send();
      })
      }
    })
   })

最佳答案

同时使用侦听器和一个执行此功能的常用功能。为避免在全局对象中设置tabId的“正在处理”状态，请在完成两次操作后将其清除。

chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
  if (changeInfo.url) run(tab);
});

chrome.tabs.onActivated.addListener(info => {
  chrome.tabs.get(info.tabId, run);
});

const processingTabId = {};

function run(tab) {
  if (processingTabId[tab.id]) return;
  processingTabId[tab.id] = true;

  let newUrl = new URL(tab.url);
  currentHost = newUrl.host;
  currentUrl = tab.url;

  doSomeAsyncStuff(() => {
    //................................
    // when all done:
    delete processingTabId[tab.id];
  });
}

请注意，不需要chrome.tabs.query，因为onUpdated已经为您提供了tab对象。同样，不仅活动的选项卡获取更新，非活动的选项卡也进行更新。不仅报告URL，还显示图标，标题，静音状态和许多其他内容。

关于javascript - 如何同时使用onUpdated和onActivated？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/60545285/