如何防止chrome扩展程序在仍处于打开状态时重新打开同一个弹出窗口？

Question

我正在使用具有登录弹出窗口的Chrome扩展程序。因此，想法是扩展工作，它需要用户登录，以便它可以与我们的API交互并获取/发布数据。

所以我覆盖browserAction以检查用户是否已登录，如果不是，则应显示登录弹出窗口。我的问题是，当我再次点击扩展图标时，它会重新打开相同的登录弹出窗口。如何防止这种情况发生，只有一个登录窗口实例打开？

background.js

// omitted some codes for brevity
chrome.browserAction.onClicked.addListener(function () {
    // omitted some codes for brevity
    chrome.windows.create({ 
        'url': 'login.html', 
        'type': 'popup',
        'width': width,
        'height': height,
        'left': (screen.width/2) - (width/2),
        'top': (screen.height/2) - (height/2),
        'focused': true
    });
});

Answer 1

有多种方法可以做到这一点。

使用chrome.tabs.query()检测窗口是否已打开

您可以通过调用chrome.tabs.query()来检查弹出窗口是否存在：

var popupUrl = chrome.runtime.getURL('/login.html');
chrome.tabs.query({url:popupUrl},function(tabs){
    if(tabs.length > -1){
        //The popup exists
    }
});

为了使上述工作正常，您必须声明tabs权限。

但是，chrome.tabs.query()在调用chrome.windows.create()和窗口实际打开之间的时间内不会检测到弹出窗口。根据测试，这个时间足够长，用户可以多次单击浏览器操作按钮，打开多个弹出窗口。

使用全局变量

跟踪弹出窗口

鉴于使用chrome.tabs.query()检测窗口的缺点，我的首选是使用全局变量来保存弹出窗口的当前状态。在下面的代码中，变量popupWindowId可以有三种常规状态：

• false：窗口未打开
• true：窗口正在打开
• typeof popupWindowId === 'number'：弹出窗口已打开。该号码是窗口ID。

如果用户点击浏览器操作按钮，则用户想要弹出窗口。虽然我们不想打开新的弹出窗口，但我们确实希望为用户提供他们想要的内容。因此，如果弹出窗口已经打开，则弹出窗口被聚焦。这将把它带到顶部，向用户显示。完整实现还应检查弹出窗口是否在屏幕的可见边界内。如果它不可见，则应移动它以使其可见。此后未实现此功能。

要检测弹出窗口何时关闭，将使用chrome.windows.onRemoved侦听器。

我还想向用户提供有关正在发生的事情的反馈，因此弹出窗口的标题更改为＆＃34;弹出窗口已打开。点击以聚焦弹出窗口。＆＃34;而弹出窗口是打开的。当窗口关闭时，标题将更改回＆＃34;打开弹出窗口＆＃34;。

background.js ：

var windowNotOpenTitle = 'Open popup window';
var windowIsOpenTitle = 'Popup window is already open. Click to focus popup.';
var popupWindowId = false; //popupWindowId can be true, false, or the popup's window Id.
chrome.browserAction.onClicked.addListener(function () {
    let width= 400;
    let height= 300;
    if(popupWindowId === false){
        popupWindowId = true; //Prevent user pressing pressing the button multiple times.
        chrome.browserAction.setTitle({title:windowIsOpenTitle});
        chrome.windows.create({ 
            'url': 'login.html', 
            'type': 'popup',
            'width': width,
            'height': height,
            'left': (screen.width/2) - (width/2),
            'top': (screen.height/2) - (height/2),
            'focused': true
        },function(win){
            popupWindowId = win.id;
        });
        return;
    }else if(typeof popupWindowId === 'number'){
        //The window is open, and the user clicked the button.
        //  Focus the window.
        chrome.windows.update(popupWindowId,{focused:true});
    }
});
chrome.windows.onRemoved.addListener(function (winId){
    if(popupWindowId === winId){
        //chrome.browserAction.enable();
        chrome.browserAction.setTitle({title:windowNotOpenTitle});
        popupWindowId = false;
    }
});