Chrome extension popup showing by condition

Question

I want to show popup by click, but only if condition is false. After click to extension icon background js searchig for tab with current name. If tab found background js continues working. If not found - i want to show popup with instructions. Can`t understand how to just show popup in this case. I can set popup by browserAction.setPopup(), but popup will be displayed only after next clicks. I just want to show my popup one time. It is definitely posible, I've seen this behavior on other extension.

var pcTabs; // tabs array

chrome.browserAction.onClicked.addListener(buttonClick);

function buttonClick() {
 // getting tabs...
 if(pcTabs.length != 0){
    // working with finded tabs
 } else{ // tabs not found
    // show popup.html here. this is the question
 }
}

upd. This is my background.js. All code also in repository. How to replace alerts to popups?

Answer 1

In short: you can't do it the way you describe.

When a popup page is set, chrome.browserAction.onClicked won't fire, and the popup will show.

When a popup page is not set, your event listener will execute, but you cannot show a popup programmatically. The most you can do is to set a popup for the next click.

So, what to do with it?

1) You can do an ugly hack (kind of) described in Edwin's answer. Always show the popup, check the condition as soon as possible, message the background and execute window.close() if the condition is met.

Of course, it is ugly.

2) The proper way to do this would be updating the popup whenever the condition can potentially change. That is, whenever you add/remove data from pcTabs, you should set/unset the popup with chrome.browserAction.setPopup

// ... somewhere ...
pcTabs.push(/*...*/);
chrome.browserAction.setPopup({popup: ''});

// ... somewhere else ...
pcTabs.pop(/*...*/);
if(!pcTabs.length) chrome.browserAction.setPopup({popup: 'popup.html'});    

chrome.browserAction.onClicked.addListener(function() {
  // Assume condition is met, popup didn't show
});

3) The fancy way to do it is to use experimental JavaScript method, Array.observe, that is only supported in Chrome.

var pcTabs = [];
Array.observe(pcTabs, function(changes) {
  changes.forEach(function(change) {
    if(change.object.length) {
      chrome.browserAction.setPopup({popup: ''});
    }   else {
      chrome.browserAction.setPopup({popup: 'popup.html'});  
    }
  });
});

Answer 2

Alright this is my code:

chrome.tabs.query({currentWindow: true, active: true}, function(tabs) {
    if (!tabs[0].url.includes('google.com')) { //check if current tab is not google: if false show popup, you can just put an else at the end and do w.e with your popup
        chrome.tabs.query({currentWindow: true, url: 'https://*.google.com/*'}, function(tabs) { //since current tab is not google query tabs with google
            if (tabs.length) { //check if there are any pages with google
                chrome.tabs.highlight({tabs: tabs[0].index}, function(w) {}); //this is what I chose to do idk what you want to do but you can write w.e here
            } else { 
                chrome.tabs.create({url: 'https://google.com'}); //other wise no pages with google open one
            }
        });
    };
});