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

2022-01-20 00:00:00 popup google-chrome-extension javascript

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

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

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

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

推荐答案

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

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

设置弹出页面后，chrome.browserAction.onClicked 不会触发，而是会显示弹出页面.

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.

那么，该怎么处理呢?

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

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.

当然，它很丑.

2) 执行此操作的正确方法是在条件可能发生变化时更新弹出窗口.也就是说，每当您从 pcTabs 添加/删除数据时，您应该使用 chrome.browserAction.setPopup

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) fancy 的方法是使用实​​验性 JavaScript 方法，Array.observe，只有 Chrome 支持.

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

相关文章