javascript - chrome.tabs.onUpdated.addListener 多次触发

Question

我正在制作一个 chrome 扩展，在我的后台脚本中我有一个 addListener，但它会多次触发，即使它是一个 onUpdated.addListener。我添加了一个 if 语句来检查 changeInfo.status == 'complete' 的情况，但它仍然会触发多次。我知道谷歌浏览器有一个与此有关的错误，但那是几年前的事了。有什么解决办法吗？提前致谢。

这是我的背景.js:

// Get the behavior of the plugin; the default is set to "onClick", the other option is "alwaysOn"
chrome.storage.sync.get({
extensionBehavior: 'onClick'
}, function(items) {
    if(items.extensionBehavior == 'onClick'){
        chrome.browserAction.onClicked.addListener(function() {
            // When the extension icon is clicked, send a message to the content script
            chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
                chrome.tabs.sendMessage(tabs[0].id, {"message": tabs[0].url}, function(response){});
            });
        });
    }
    else {
        chrome.browserAction.setBadgeText({text:"auto"});
        chrome.tabs.onCreated.addListener(function (tab) {
            chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) {
                if (tab.status == 'complete') {
                    chrome.tabs.sendMessage(tabId, {"message": tab.url}, function(response){});
                }
            });
        });
    }
});

这是我的 list .json:

{
"manifest_version": 2,
"name": "My Extension",
"version": "1.2.1",
"description": *redacted for privacy reasons*,
"content_scripts": [{
    "matches": [
      "<all_urls>"
    ],
    "js": ["content_script.js", "jquery-2.2.4.js"]
  }
],
"background": {
    "scripts": ["background.js"]
},
"options_ui": {
    "page": "options.html"
},
"browser_action": {
    "default_icon": "blue-logo.png"
},
"permissions": [
    "storage",
    "activeTab",
    "tabs"
]
}

如果您想知道为什么我的 onCreated 中有一个 onUpdated，那是因为 onCreated 不能单独工作，而且我还需要它在以下情况下触发:之前创建的选项卡也会更新(例如，我创建一个选项卡，转到一个 URL，然后使用该选项卡转到另一个 URL)。我一开始正在检查 changeInfo.status，但是当它不起作用时，我将其更改为 tab.status，这些不是同一个变量吗？两者似乎都给出了相同的行为(在不应该的时候触发)。

Answer 1

每次创建标签页时，您都会向 chrome.tabs.onUpdated 添加一个新的监听器:

chrome.tabs.onCreated.addListener(function (tab) {
    chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) {
        ...

这意味着，如果您创建三个选项卡，则每次更新一个选项卡时，您的 unUpdated 监听器都会被调用三次。 onCreated 事件的 tab 参数也被忽略，因为 onUpdated 回调采用相同名称的参数。

如果您需要监听这两个事件，则应分别添加每个监听器:

chrome.tabs.onCreated.addListener(function (tab) {
    ...
});
chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) {
    ...
});