3

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

截屏：

在此处输入图像描述

使用一段时间后，装载盒被移除setTimeout。但是，这仅在弹出窗口本身可见时才有效。如果我单击弹出窗口上的按钮，然后转到其他选项卡并返回或单击选项卡页面上的其他位置，则弹出窗口隐藏但加载框仍然可见。

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

无需在此处粘贴所有相关代码，这里是扩展程序的下载链接，以便您可以准确了解我的意思。

在实际扩展中，我有 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__'))"}
             );
         }
     });

谢谢你的帮助

4

2 回答 2

2

脚步

  • 将此 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 看起来像这样，您可以直接调用后台 Page 的功能

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 以仅获取当前活动的浏览正常窗口
  • 回调返回 tab 数组，所以使用tab[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());
        });

    });

});

背景.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());
    });

});
于 2013-01-26T10:41:03.843 回答
0

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

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

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

于 2013-01-26T07:50:56.630 回答