Chrome extension popup conditionally displayed
I want to show the popup on click, but only if the condition is false. After clicking on the js searchig extension icon for the tab with the current name. If the tab is found, the js background continues to work. If not found - I want to show a popup with instructions. There is no way to figure out how to show the popup in this case. I can set the browserAction.setPopup () popup, but the popup will only show after the next clicks. I just want to show my popup. This is definitely possible, I've seen this behavior on another 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
}
}
obn . This is my background.js . All code is also in the repository. How do I replace alerts with pop-ups?
source to share
In short: you cannot do it the way you describe.
When the popup page is set, chrome.browserAction.onClicked
will not launch and the popup will be shown.
If no popup page is set, your event runner will execute, but you wo n't be able to popup programmatically . The most you can do is set the popup for the next click.
So what to do with it?
1) You can do the ugly hack (the kind) described in Edwin's answer. Always show the popup, check the status as soon as possible, report the background and follow window.close()
if the condition is met.
Of course it's ugly.
2) The correct way to do this would be to update the popup whenever the condition could potentially change. That is, whenever you add / remove data from pcTabs
, you have to set / disable the popup withchrome.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 this is to use an experimental JavaScript method Array.observe
, which 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'});
}
});
});
source to share
Ok, 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
}
});
};
});
source to share