chrome.tabs.onUpdated.addListener() is called twice

Question

I'm writing a chrome extension and in some web sites chrome.tabs.onUpdated.addListener() is called twice.

It mostly happens if i click on a link and not when i type in a URL by myself.

From what i found on the web and from many questions asked on StackOverflow there was a bug on chrome but it was fixed several years ago.

Some people claim it happens if there are several iframes in the page, but in my case there are no iframes in my page.

This is my code:

 var storage = chrome.storage.local;

chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) {
    if (changeInfo.status == 'complete' && tab.status == 'complete' && tab.url != undefined) {
            storage.get('URLs', function(URLs){
                for (var item in URLs)
                {
                    if (tab.url == item)
                    {
                        return;
                    }
                    else
                    {
                        //alert ("tab load complete");
                        storage.set({URLs: [tab.url]});
                        chrome.tabs.executeScript(tab.id, {
                        "file": "flashblocker.js"
                        }, function () { // Execute your code
                        console.log("Script Executed .. "); // Notification on Completion
                        });
                    }
                }
            });
    }
});

How can i make it run only once?

Thanks.

Answer 1

Use a variable and add a check inside the listener to check the value of this variable before executing the alert. You can do something like this:

var tabUpdated = false;
chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) {
    if (changeInfo.status == 'complete' && tab.status == 'complete' && tab.url != undefined) {
        if (!tabUpdated) {
            alert("tab load complete");
            tabUpdated = true;
        }
    }
});

But this will fail if the content script is actually loading twice as the tabUpdated variable will again be initialized to false. In that case you can use the chrome's Storage API and store the URL for which the listener has been already invoked. Simply add a check for this, if the URL is there in storage, the alert wont be invoked, else it will invoke. You can then clear the storage at the browser start or close.

chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) {
    if (changeInfo.status == 'complete' && tab.status == 'complete' && tab.url != undefined) {
        chrome.local.storage.get('URLs', function(URL's) {
            // Iterate through this list here and match with tab.url, if the match is found, just return.
            if (url is there in list) {return;}
            else {
                alert("tab load complete");
                chrome.local.set({URLs: [tab.url]}); 
            }
        });
    }
});

This is just an example of how you can achieve it. Tweak it according to your needs.

I hope this helps.