按条件显示的 Chrome 扩展弹出窗口

Question

我想通过点击显示弹出窗口，但前提是条件为假。 单击以扩展图标背景 js 搜索具有当前名称的选项卡后。如果选项卡找到后台 js 继续工作。如果找不到 - 我想显示带有说明的弹出窗口。无法理解在这种情况下如何只显示弹出窗口。 我可以通过 browserAction.setPopup() 设置弹出窗口，但只有在下次点击后才会显示弹出窗口。 我只想显示我的弹出窗口一次。 这绝对是可能的，我在其他扩展程序上看到过这种行为。

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
 }
}

更新。 这是我的background.js。所有代码也在存储库中。 如何将警报替换为弹出窗口？

Answer 1

简而言之：你不能按照你描述的方式去做。

设置弹出页面时，chrome.browserAction.onClicked 不会触发，并且会显示弹出窗口。

当没有设置弹出页面时，你的事件监听器会执行，但是你cannot show a popup programmatically。您最多可以设置一个弹出窗口以供下次点击。

那么，该怎么处理呢？

1）你可以做一个丑陋的黑客（有点）在埃德温的回答中描述。始终显示弹窗，尽快检查条件，向后台发送消息，如果条件满足则执行window.close()。

当然，它很丑。

2) 执行此操作的正确方法是在条件可能发生变化时更新弹出窗口。也就是说，每当您从pcTabs 添加/删除数据时，您应该使用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) fancy 的方法是使用实​​验性 JavaScript 方法 Array.observe，该方法仅在 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

好的，这是我的代码：

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