javascript - Chrome extension popup showing by condition - Stack Overflow

admin管理员组

文章数量:1289828

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?

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?

• javascript
• google-chrome-extension
• popup

Share Improve this question Follow edited Dec 20, 2014 at 10:14 illuzor asked Dec 20, 2014 at 6:34 illuzorilluzor 68199 silver badges2222 bronze badges 5

• Can you please edit your question the missing mas are messing me, up(not trying to be a di*k. and "I want to show popup by click" click on current page or on the browser action – Edwin Reynoso Commented Dec 20, 2014 at 6:46
• where is this js file in the background file or the popup? and also you don't need to put != 01 because in javascript 1 == true` and 0 == false – Edwin Reynoso Commented Dec 20, 2014 at 7:21
• In the background. Thanks for explanation about true/false – illuzor Commented Dec 20, 2014 at 7:22
• ok so what you want is: when you click on the browserAction, you want to find certain tabs if you found them don't show the popup if you do then show it? – Edwin Reynoso Commented Dec 20, 2014 at 7:24
• Yes. For example this extenstion. If google music page is not opened, displaying popup with links. If opened - just paused\playing music. I want to implement exactly the same behavior – illuzor Commented Dec 20, 2014 at 7:30

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 10

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'});  
    }
  });
});

Alright this is my code:

chrome.tabs.query({currentWindow: true, active: true}, function(tabs) {
    if (!tabs[0].url.includes('google.')) { //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./*'}, 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.'}); //other wise no pages with google open one
            }
        });
    };
});

本文标签： javascriptChrome extension popup showing by conditionStack Overflow