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

Question

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

6

我希望能够在点击后显示弹出窗口，但仅在条件为假时。点击扩展程序图标后，背景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文件。所有代码也在存储库中。如何将警报替换为弹出窗口？

- illuzor

你能否编辑一下你的问题？缺少逗号让我很困扰（不是要刻意找茬）。另外，“我想通过点击来显示弹出窗口”，是在当前页面上点击还是在浏览器操作上点击？ - Edwin Reynoso

这个JS文件在后台文件还是弹出窗口中？另外，您不需要放置！= 01，因为在JavaScript中，1 == true和0 == false。 - Edwin Reynoso

在后台。感谢关于真/假的解释。 - illuzor

您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - Edwin Reynoso

是的。例如这个扩展程序。如果谷歌音乐页面没有打开，则显示带有链接的弹出窗口。如果已经打开，则只需暂停\播放音乐。我想实现完全相同的行为。 - illuzor

2个回答

-1

好的，这是我的代码：

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

- Edwin Reynoso

这是对于问题“如何？”的回答。 - Xan

这就是条件：if(!tabs[0].url.includes('google.com')。 - Edwin Reynoso

那么这怎么展示一个弹出窗口呢？ - Xan

显示一个弹出窗口，如果语句为假，它将继续运行。该代码位于 popup.js 文件中。因为它没有告诉任何标签要切换或打开新的标签页，所以它保持弹出窗口处于打开状态。当语句为真并且切换到 Google 标签页或创建另一个标签页时，它会关闭弹出窗口。 - Edwin Reynoso

我认为在我的情况下打开丢失的选项卡是个好主意。 - illuzor

显示剩余4条评论

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Xan · Accepted Answer

简而言之：您无法按照您描述的方式操作。

当设置了弹出页时，chrome.browserAction.onClicked不会触发，弹出页将显示。

当未设置弹出页时，您的事件监听器将执行，但您无法以编程方式显示弹出窗口。最多只能为下一次点击设置一个弹出页。

那么，该怎么办呢？

1）您可以使用Edwin答案中描述的丑陋的黑客方法（有点）。始终显示弹出页，尽快检查条件，向后台发送消息并在满足条件时执行window.close()。

当然，这很丑陋。

2）正确的方法是在潜在更改条件的情况下更新弹出页。也就是说，每当您添加/删除数据时，应使用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'});  
    }
  });
});