一些变量被多次加载

Question

在我短暂的程序员生涯中，我第一次看到这样的行为：

一个扩展在它自己的作品中像我预期的那样工作，但是如果我将一些变量拉入控制台，我意识到它们会被多次加载（三、四和五次，取决于console.log 在@987654322 中的位置@)。这是它们的列表 - 也可以在 background.js 中看到：

• console.log("domen: "+currentDomain);
• console.log("language/countrysubdomen: "+savedApi);
• console.log("index: "+badgeText);

有什么可以忽略的吗？应该避免吗？如何？这些变量被加载到文件中，该文件有 60 行长——我曾多次浏览该文件，但没有发现多次加载的原因。

为什么会这样？ background.js 中有什么错误以及如何改进以解决此问题？

清单

{
  "name": " App",
  "description": "",
  "version": "1.0",
  "background": {
    "scripts": [
      "background.js",
      "psl.js"
    ],
    "persistent": false
  },
  "options_page": "options.html",
  "options_ui": {
    "page": "options.html",
    "chrome_style": true,
    "open_in_tab": false
  },
  "permissions": [
    "webNavigation",
    "activeTab",
    "tabs",
    "http://*/*",
    "https://*/*",
    "storage",
    "background"
  ],
  "browser_action": {
    "default_title": "metrics",
    "default_icon": {
      "19": "icon19.png",
      "38": "icon38.png"
    },
    "default_popup": "popup.html"
  },
  "icons": {
    "16": "icon16.png",
    "19": "icon19.png",
    "24": "icon24.png",
    "32": "icon32.png",
    "38": "icon38.png",
    "48": "icon48.png",
    "128": "icon128.png"
  },
  "web_accessible_resources": [
    "welcome.html"
  ],
  "manifest_version": 2
}

背景

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

chrome.runtime.onInstalled.addListener(function (object) {
  if (chrome.runtime.OnInstalledReason.INSTALL === object.reason) {
    chrome.tabs.create({ url: chrome.extension.getURL("welcome.html") }, function (tab) {
      console.log("New tab launched with instructions to use the extension");
    });
  }
});

chrome.tabs.onUpdated.addListener(function (tabid, changeInfo, tab) {
  chrome.tabs.query({ 'active': true, 'currentWindow': true }, function (tabs) {
    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;

    console.log("domen: " + currentDomain);

    chrome.storage.sync.get('savedApi', ({ savedApi }) => {
      console.log("language/countrysubdomen: " + savedApi);

      if (savedApi == null)
        savedApi = 'de';
      if (currentDomain == 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/";

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

      xhr.responseType = 'document';

      xhr.send();

      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("index: " + badgeText);

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

Answer 1

您向chrome.tabs.onUpdated 添加了一个监听器，因此可能有多种原因触发该监听器：

1. 标签开始加载
2. 标签停止加载
3. 第一次更改或设置选项卡的标题
4. 网站图标已设置

这是一个非详尽的列表。如需完整列表，请参阅chrome.tabs.onUpdated event documentation。

您的onUpdated 侦听器应该被多次调用是很正常的。要查看它被调用的原因，请在您的侦听器顶部插入这一行：

chrome.tabs.onUpdated.addListener(function (tabid, changeInfo, tab) {
  console.log('chrome.tabs.onUpdated listener called. Changed info: ' + JSON.stringify(changeInfo));