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

豪宅

我正在使用具有登录弹出窗口的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] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

强制关闭弹出窗口,然后重新打开Chrome扩展程序

来自分类Dev

打开弹出窗口时 Chrome 扩展程序已损坏

来自分类Dev

使弹出窗口保持打开状态与jQuery

来自分类Dev

关闭和打开Chrome扩展程序弹出窗口时如何不丢失数据

来自分类Dev

阻止提交的表单在同一弹出窗口中打开

来自分类Dev

如何检测JavaFx应用程序窗口处于打开状态并在其中显示对话框?

来自分类Dev

当设备处于网络关闭和打开状态时如何在应用程序中显示文本消息

来自分类Dev

在chrome扩展程序中打开和访问弹出窗口

来自分类Dev

在 Google Chrome 扩展程序中获取打开的弹出窗口

来自分类Dev

辅助功能检查器处于打开状态时,iOS 9.1会使应用程序崩溃

来自分类Dev

辅助功能检查器处于打开状态时,iOS 9.1会使应用程序崩溃

来自分类Dev

chrome扩展程序弹出窗口可以知道是否是第一次打开吗?

来自分类Dev

ChannelFactory`1 [BLLService],处于打开状态时无法修改

来自分类Dev

使HTML窗口保持打开状态,直到用户关闭它

来自分类Dev

Chrome扩展程序:如何在页面加载时运行Javascript(不打开弹出窗口)

来自分类Dev

如何确保键盘背光在启动时始终处于打开状态(最大)?

来自分类Dev

如何设置设备的屏幕处于打开状态,并在收到通知时振动?

来自分类Dev

WordPress如何使切换菜单处于打开状态

来自分类Dev

如何防止我的Chrome扩展程序中的弹出窗口放大

来自分类Dev

当弹出窗口打开时防止正文滚动

来自分类Dev

如何自动触发多个gnome-terminal窗口并使它们保持打开状态并处于活动状态?

来自分类Dev

Windows中全屏模式下有另一个应用程序处于活动状态时,如何打开应用程序窗口?

来自分类Dev

如何防止打开多个弹出窗口?

来自分类Dev

播放视频时使扩展框保持打开状态

来自分类Dev

在应用程序仍处于打开状态时,如何将.mdf和.ldf文件从一个位置复制到另一位置?

来自分类Dev

当用户导航到不同页面时,facebook如何使聊天窗口保持打开状态?

来自分类Dev

运行命令后如何使tmux窗口保持打开状态

来自分类Dev

如何从Chrome扩展程序中打开的窗口获取背景页面?

来自分类Dev

打开弹出窗口时程序闪烁

Related 相关文章

  1. 1

    强制关闭弹出窗口,然后重新打开Chrome扩展程序

  2. 2

    打开弹出窗口时 Chrome 扩展程序已损坏

  3. 3

    使弹出窗口保持打开状态与jQuery

  4. 4

    关闭和打开Chrome扩展程序弹出窗口时如何不丢失数据

  5. 5

    阻止提交的表单在同一弹出窗口中打开

  6. 6

    如何检测JavaFx应用程序窗口处于打开状态并在其中显示对话框?

  7. 7

    当设备处于网络关闭和打开状态时如何在应用程序中显示文本消息

  8. 8

    在chrome扩展程序中打开和访问弹出窗口

  9. 9

    在 Google Chrome 扩展程序中获取打开的弹出窗口

  10. 10

    辅助功能检查器处于打开状态时,iOS 9.1会使应用程序崩溃

  11. 11

    辅助功能检查器处于打开状态时,iOS 9.1会使应用程序崩溃

  12. 12

    chrome扩展程序弹出窗口可以知道是否是第一次打开吗?

  13. 13

    ChannelFactory`1 [BLLService],处于打开状态时无法修改

  14. 14

    使HTML窗口保持打开状态,直到用户关闭它

  15. 15

    Chrome扩展程序:如何在页面加载时运行Javascript(不打开弹出窗口)

  16. 16

    如何确保键盘背光在启动时始终处于打开状态(最大)?

  17. 17

    如何设置设备的屏幕处于打开状态,并在收到通知时振动?

  18. 18

    WordPress如何使切换菜单处于打开状态

  19. 19

    如何防止我的Chrome扩展程序中的弹出窗口放大

  20. 20

    当弹出窗口打开时防止正文滚动

  21. 21

    如何自动触发多个gnome-terminal窗口并使它们保持打开状态并处于活动状态?

  22. 22

    Windows中全屏模式下有另一个应用程序处于活动状态时,如何打开应用程序窗口?

  23. 23

    如何防止打开多个弹出窗口?

  24. 24

    播放视频时使扩展框保持打开状态

  25. 25

    在应用程序仍处于打开状态时,如何将.mdf和.ldf文件从一个位置复制到另一位置?

  26. 26

    当用户导航到不同页面时,facebook如何使聊天窗口保持打开状态?

  27. 27

    运行命令后如何使tmux窗口保持打开状态

  28. 28

    如何从Chrome扩展程序中打开的窗口获取背景页面?

  29. 29

    打开弹出窗口时程序闪烁

热门标签

归档