的步骤

Question

我正在使用带有弹出窗口的chrome扩展程序，当您单击扩展程序图标时会显示该扩展程序。在弹出窗口中，我有一个按钮，一旦点击就会在当前打开的标签页上显示加载框。

截图：

enter image description here

使用setTimeout一段时间后删除加载框。但是这只适用于弹出窗口本身可见的情况。如果我点击弹出窗口上的按钮然后转到其他选项卡并返回或单击标签页上的其他位置，则弹出窗口隐藏但仍然可以看到加载框。

即使弹出窗口不可见/失焦，有人知道如何隐藏加载框吗？我认为它会消失，因为有setTimeout函数可以删除它，但是当弹出窗口失去焦点时它不起作用。

此处不是粘贴所有相关代码，here是扩展程序的下载链接，以便您可以确切了解我的意思。

在实际扩展中，我有ajax请求，而不是setTimeout：

 $.ajax({
         url : 'localhost url here....',
         data : data, // this is searialized form data
         dataType : 'json',
         method : 'post',
         success : function (r) {
             if (r.success) {
                 window.close();

                 var notification = webkitNotifications.createNotification(
                    'img/48.png',
                    'Done!',
                    'The page has been saved successfully :)'
                 );

                 notification.show();

                 setTimeout(function () {
                     notification.cancel();
                 }, 5000);

             }
             else {
                 if (r.error) {
                     $ediv.text(r.error).fadeIn('fast');
                 }
             }
         },
         error : function (r) {
             $ediv.text('Unknown error, please try again later.').fadeIn('fast');
         },
         complete : function (r) {
             chrome.tabs.executeScript(
                null, {code : "document.body.removeChild(document.getElementById('__wnoverlay__'))"}
             );
         }
     });

感谢您的帮助

Answer 1

的步骤

将此AJAX请求移至背景页。
单击按钮（将对话框注入页面的位置）将消息传递给后台脚本存储 tab.id （检查下一个点）。
使用从浏览器操作中收到的 tab.id 执行删除对话框代码（需要使用标签ID，因为用户可以随时切换其活动标签\窗口。）

参考

编辑1

在清单文件中添加以下内容，确保使用背景页面注册背景和jquery。

"background":{
    "scripts":["js/jquery.js","background.js"]
},

在background.js

中添加以下代码

此代码将AJAX调用迁移到后台页面，并在5秒阈值后执行删除对话框。

function invokeAJAX(tabid) {

    $.ajax({
        url: 'localhost url here....',
        data: data, // this is searialized form data
        dataType: 'json',
        method: 'post',
        success: function (r) {
            if (r.success) {
                window.close();

                var notification = webkitNotifications.createNotification(
                    'img/48.png',
                    'Done!',
                    'The page has been saved successfully :)');

                notification.show();

                setTimeout(function () {
                    notification.cancel();
                }, 5000);

            } else {
                if (r.error) {
                    $ediv.text(r.error).fadeIn('fast');
                }
            }
        },
        error: function (r) {
            $ediv.text('Unknown error, please try again later.').fadeIn('fast');
        },
        complete: function (r) {
            chrome.tabs.executeScript(
            tabid, {
                code: "document.body.removeChild(document.getElementById('__wnoverlay__'))"
            });
        }
    });

}

你的popup.js看起来就像你直接调用背景页面的功能

document.addEventListener("DOMContentLoaded", function () {

    $('#btn').click(function () {

        // show loading message

        // chrome.extension.sendRequest({}, function(response) {});

        chrome.tabs.executeScript(null, {
            "code": 'var __a=document.createElement("DIV");__a.id="__wnoverlay__";__a.style.width="300px";__a.style.height="80px";__a.style.position="fixed";__a.style.top="50%";__a.style.left="50%";__a.style.color="#fff";__a.style.zIndex=9999999;__a.style.opacity=0.8;__a.style.textAlign="center";__a.style.padding="10px";__a.style.border="12px solid #cccccc";__a.style.marginLeft="-150px";__a.style.marginTop="-40px";__a.style.fontWeight="bold";__a.style.fontSize="17px";__a.style.borderRadius="10px";__a.innerHTML="Working, please wait...";document.body.appendChild(__a);'
        });
        chrome.tabs.query({}, function (tab) {//Get current tab 

            chrome.extension.getBackgroundPage().invokeAJAX(tab.id);//DO Ajax call and delete div added after 5 sec to current tab only
        });


    });
});

编辑2

popup.js

对popup.js

所做的更改

将tabs.query设为仅提取当前有效浏览正常窗口
回调标签数组，使用标签[0] 索引。

在这些更改之后，它会发送正确的消息。

document.addEventListener("DOMContentLoaded", function () {

    $('#btn').click(function () {
        var $this = $(this);

        chrome.tabs.executeScript(
        null, {
            "code": 'var __a=document.createElement("DIV");__a.id="__wnoverlay__";__a.style.width="300px";__a.style.height="80px";__a.style.position="fixed";__a.style.top="50%";__a.style.left="50%";__a.style.color="#fff";__a.style.background="url(http://groot.com/WebNote_HTML/ChromeExtension/img/spinner.gif) center no-repeat #999999";__a.style.zIndex=9999999;__a.style.opacity=0.8;__a.style.textAlign="center";__a.style.padding="10px";__a.style.border="12px solid #cccccc";__a.style.marginLeft="-150px";__a.style.marginTop="-40px";__a.style.fontWeight="bold";__a.style.fontSize="17px";__a.style.borderRadius="10px";__a.innerHTML="Working, please wait...";document.body.appendChild(__a);'
        });
        //Proper Query Formation    
        chrome.tabs.query({
            "active": true,
            "status": "complete",
            "currentWindow": true,
            "windowType": "normal"
        }, function (tab) { //Get current tab
            //DO Ajax call
            //tab is an array so we need to access its first index
            chrome.extension.getBackgroundPage().invokeAJAX(tab[0].id, $this.closest('form').serialize());
        });

    });

});

background.js

对background.js

所做的更改

消除了$ediv.text代码引用，因为它在后台页面中未定义。

在这些更改之后，这是最终代码。

 function invokeAJAX(tabid, data) {

     data = data || '';

     $.ajax({
         url: 'http://groot.com/WebNote_HTML/ChromeExtension/savePage.php',
         data: data,
         dataType: 'json',
         method: 'post',
         success: function (r) {
             if (r.success) {
                 // window.close();

                 var notification = webkitNotifications.createNotification(
                     'img/48.png',
                     'Done!',
                     'The page has been saved successfully :)');

                 notification.show();

                 setTimeout(function () {
                     notification.cancel();
                 }, 5000);

             } else {
                 if (r.error) {
                     //$ediv.text(r.error).fadeIn('fast');
                     console.log("Error .." + r);
                 }
             }
         },
         error: function (r) {
             //$ediv.text('Unknown error, please try again later.').fadeIn('fast');
             console.log("Error .." + r);
         },
         complete: function (r) {
             chrome.tabs.executeScript(
             tabid, {
                 code: "document.body.removeChild(document.getElementById('__wnoverlay__'))"
             });
         }
     });

 }

编辑3

$('#btn').click(function () {
    var $this = $(this);
    //Proper Query Formation    
    chrome.tabs.query({
        "active": true,
        "status": "complete",
        "currentWindow": true,
        "windowType": "normal"
    }, function (tab) { //Get current tab
        //DO Ajax call
        //tab is an array so we need to access its first index
        chrome.tabs.executeScript(
        tab[0].id, {
            "code": 'var __a=document.createElement("DIV");__a.id="__wnoverlay__";__a.style.width="300px";__a.style.height="80px";__a.style.position="fixed";__a.style.top="50%";__a.style.left="50%";__a.style.color="#fff";__a.style.background="url(http://groot.com/WebNote_HTML/ChromeExtension/img/spinner.gif) center no-repeat #999999";__a.style.zIndex=9999999;__a.style.opacity=0.8;__a.style.textAlign="center";__a.style.padding="10px";__a.style.border="12px solid #cccccc";__a.style.marginLeft="-150px";__a.style.marginTop="-40px";__a.style.fontWeight="bold";__a.style.fontSize="17px";__a.style.borderRadius="10px";__a.innerHTML="Working, please wait...";document.body.appendChild(__a);'
        });
        $('#url').val(tab[0].url);
        $('#title').val(tab[0].title);
        $loader.hide();
        chrome.extension.getBackgroundPage().invokeAJAX(tab[0].id, $this.closest('form').serialize());
    });

});

Answer 2

弹出代码在未显示时停止执行。但是，始终执行注入的代码。所以你应该在注入的代码中设置超时，如下所示：

chrome.tabs.executeScript(null, {"code": 'setTimeout(function(){ document.body.removeChild(document.getElementById("__wnoverlay__")); }, 5000)'});

使用上面的代码替换第13-15行的代码，它应该可以工作。

当弹出窗口失去焦点时隐藏加载覆盖

2 个答案:

的步骤

参考

编辑1

编辑2

popup.js

background.js

编辑3