CODEWITHSUNDEEP
javascriptgoogle-chromegoogle-chrome-extensionbackgroundtabs
Cameron Payton
Cameron Payton

Reputation: 432

chrome.tabs.onUpdated.addListener firing more than once

I am making a chrome extension, and in my background scripts I have an addListener, but it is firing more than once even though it is an onUpdated.addListener. I added an if statement to check for when changeInfo.status == 'complete', but it is STILL firing multiple times. I know Google Chrome had a bug that had to do with this, but that was years ago. Any solutions? Thanks in advance.

Here is my background.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){});
                }
            });
        });
    }
});

Here is my manifest.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"
]
}

If you're wondering why I have an onUpdated inside of my onCreated, it's because the onCreated wasn't working alone, and I also need it to fire when tabs that have previously been created are also updated (as in, I create a tab, go to a URL, and then go to another URL with that tab). I was checking for changeInfo.status at first, but when that wasn't working I changed it to tab.status, are these not the same variable? Both seem to give the same behavior (firing when they aren't supposed to).

Upvotes: 1

Views: 2458

Answers (1)

mgiuffrida
mgiuffrida

Reputation: 3579

You're adding a new listener to chrome.tabs.onUpdated every time a tab is created:

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

which means if you create three tabs, your unUpdated listener will be called three times any time one tab is updated. The tab parameter for the onCreated event is also being ignored because the onUpdated callback takes a parameter of the same name.

If you need to listen to both events, you should add each listener separately:

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

Upvotes: 1

Related Questions