Chrome extension: Display popup.html but only when there's an error in background.js

Question

I've been trying for ages to solve this but no luck so far.

What I want to do is that when the extension icon is clicked on a check to be made. If that check fails I want the popup to be displayed, otherwise hide it. Then at each subsequent click on the extensions icon the check is re-run to find out whether the current tab passes or fails the check.

The first click works fine, but the subsequent clicks need to be clicked twice before taking effect.

Here is what I currently have:

background.js:

// Stop the popup displaying on first load
chrome.browserAction.setPopup({popup: ""});

// Check whether the main.css can load, if not the setup the popup.html to display
chrome.tabs.executeScript (null, {file: "main.css"}, function() {
    if (chrome.runtime.lastError) {
        // The file couldn't be loaded to display the popup
        chrome.browserAction.setPopup({popup: 'popup.html'});
    }
});


chrome.browserAction.onClicked.addListener(function(tab) {

     chrome.tabs.executeScript (null, {file: "main.js"}, function() {
        if (chrome.runtime.lastError) {
           var errorMsg = chrome.runtime.lastError.message

           console.log('Error occurred... ' + errorMsg);

           // Show the popup as there has been an error
           chrome.browserAction.setPopup({popup: 'popup.html'});
        }
        else
        {
           // Everything loaded ok so now load the css file too
           console.log('All ok...');

           // Stop the popup appearing
           chrome.browserAction.setPopup({popup: ""});
           chrome.tabs.insertCSS(null, {file: "main.css"});   
        }
    });
});

popup.js:

chrome.browserAction.setPopup({popup: ""});

// Run this within popup so the a bespoke message can be displayed and that the popup can be made to work in the same way as the chrome.browserAction.onClicked event in background.js
// This is because 'onClicked' event does not fire if the browser action has a popup: https://developer.chrome.com/extensions/browserAction#event-onClicked
chrome.tabs.executeScript (null, {file: "main.js"}, function() {
    if (chrome.runtime.lastError) {
      var aErrorMessage = chrome.runtime.lastError.message

      chrome.browserAction.setPopup({popup: 'popup.html'});

      // Create a div to put the Error Message in
      var aErrorMessageContainer = document.createElement('div');
      aErrorMessageContainer.setAttribute('id', 'errormsg-container');

      document.body.appendChild(aErrorMessageContainer);

      // Create a paragraph to place the error message text in
      var aErrorMessagePara = document.createElement('p');
      aErrorMessagePara.setAttribute('id', 'error-message');
      aErrorMessagePara.innerHTML = '<hr/><b>Chrome Error Message:</b><br /> <i>' + aErrorMessage + '</i>';

      aErrorMessageContainer.appendChild(aErrorMessagePara);
    }
    else
    {
      chrome.browserAction.setPopup({popup: ""});
      chrome.tabs.insertCSS(null, {file: "main.css"});   
    }
});

The problem here is the part where I'm trying to set the popup to show or hide within the 'chrome.browserAction.onClicked' event.

The part at the top of background.js works well in deciding whether to initially show or hide the popup so no problems there.

But if the user is in a tab that fails the 'chrome.tabs.executeScript' test within the 'onClicked' event in background.js and the user then navigates to a different tab in the browser that doesn't fail the 'chrome.tabs.executeScript' test they have to click twice to see the results.

I think this is because although the popup value is being set in the Click event, nothing changes until the user clicks the extension's icon for a second time.

I hope that makes sense!

Any help would be much appreciated.