javascript - ポップアップがフォーカスを失ったときにローディングオーバーレイを非表示にする

Question

拡張機能アイコンをクリックすると表示されるポップアップを備えたクロム拡張機能に取り組んでいます。ポップアップで、一度クリックすると、現在開いているタブページに読み込みボックスが表示されるボタンがあります。

スクリーンショット:

ここに画像の説明を入力

を使用してしばらくすると、ローディングボックスが削除されますsetTimeout。ただし、これはポップアップ自体が VISIBLE の場合にのみ機能します。ポップアップのボタンをクリックしてから他のタブに移動して戻ってくるか、タブページの他の場所をクリックすると、ポップアップは非表示になりますが、ロードボックスは表示されたままになります。

ポップアップが非表示になったり、フォーカスが外れたりしても、読み込みボックスを非表示にする方法を知っている人はいますか? それを削除する機能があるので消えると思ってい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__'))"}
             );
         }
     });

ご協力いただきありがとうございます

score 2 · Accepted Answer

手順

この 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());
    });

});

javascript - ポップアップがフォーカスを失ったときにローディング オーバーレイを非表示にする

2 に答える 2

手順

参考文献

編集1

編集2

popup.js

background.js

編集3

Related

Reference

javascript - ポップアップがフォーカスを失ったときにローディングオーバーレイを非表示にする