我正在使用具有登录弹出窗口的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
});
});
您可以通过多种方式执行此操作。
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
侦听器。
我还想向用户提供正在发生的事情的反馈,因此弹出窗口的标题更改为“弹出窗口已经打开。单击以集中弹出窗口。” 当弹出窗口打开时。关闭窗口后,标题将更改回“打开弹出窗口”。
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;
}
});
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句