Chrome扩展程序:在页面更改之间显示加载程序

时间:2017-08-21 05:59:24

标签: javascript google-chrome-extension

我正在为特定网页开发Chrome扩展程序,该网页会隐藏页面的某些元素,以避免使用此功能并将其放入Kiosk中,简单的不是吗?

问题是,页面不是"足够快" 所以当扩展程序完成他的工作时(在准备好文件上),显示所有网页的时间会有几秒钟

我试图在页面仍在加载时以及当用户点击某些允许的链接但是没有成功时显示加载程序。

我尝试的是:

在请求事件之前捕获并注入Loader:

chrome.webRequest.onBeforeRequest.addListener(
    function (details) {
        chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
            var activeTab = tabs[0];
            chrome.tabs.executeScript(activeTab.id, {
                file: 'injectLoader.js',
                runAt: 'document_start'
            }, function(){

            });
        });
    }, { urls: ["*://*/*URL*"] }
);

injectLoader.js类似于:

var div = document.createElement('div');
div.id = 'sstechLoader';
div.innerHTML = '<h1>CARGANDO</h1>';
document.body.appendChild(div)

然后我尝试删除已完成事件中的加载器div:

chrome.webRequest.onCompleted.addListener(
    function (details) {
        chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
            var activeTab = tabs[0];
            chrome.tabs.executeScript(activeTab.id, {
                code: "setTimeout(function(){document.querySelector('#sstechLoader').remove()},1000);",
                runAt: 'document_end'
            }, function(){
            });
        });
    }, { urls: ["*://*/*URL*"] }
);

(我为了以防万一添加了超时)

事情是,它不能正常工作,加载程序出现但网站可以看到几秒钟。加载器永远不会消失,我不知道为什么onCompleted永远不会被调用。

还有其他方法可以完成我想要做的事情吗?

已更新

我在@woxxom和@sam

的请求中添加了相关代码

使用解决方案更新

@Makyen suggestion我刚刚找到解决方案将 put loader 逻辑放入chrome.webNavigation.onCommitted

chrome.webNavigation.onCommitted.addListener(function(details){
    chrome.tabs.executeScript(details.tabId, {
        file: 'injectLoader.js',
        runAt: 'document_start'
    }, function(){
    });
});

非常感谢你们的帮助!

0 个答案:

没有答案