javascript - 按条件显示的 Chrome 扩展程序弹出窗口

Question

我想通过点击显示弹出窗口，但前提是条件为假。单击扩展图标背景 js searchig 后，使用当前名称搜索选项卡。如果找到选项卡，后台 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) 您可以执行 Edwin 的回答中描述的丑陋黑客攻击(某种程度上)。始终显示弹出窗口，尽快检查条件，向后台发送消息并在满足条件时执行 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) 花哨的方法是使用实​​验性 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'});  
    }
  });
});