0

I'm developing a Chrome Extension for a specific Web Page that hides some elements of the page to avoid using some functions of this and put it in a Kiosk, simple no?.

The thing is, the page is not "fast enough" so when the extension do his work (on document ready) there's some seconds showing all the webpage.

I'm trying to show a loader when the page is still loading and when the user click on some of the allowed links but with no success.

The thing i'm trying is:

Catch before request event and inject the 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*"] }
);

The injectLoader.js is something like:

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

Then i try to delete the loader div in the completed event:

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*"] }
);

(i added a timeout just in case)

The thing is, it's not working, the loader appears but the site can be saw for seconds. And the loader never disappear i don't know why the onCompleted is never called.

There's some other way to accomplish what i'm trying to do?

UPDATED

I added the relevant code in request of @woxxom and @sam

UPDATE With solution

After the @Makyen suggestion i just found the solution putting the put loader logic in the chrome.webNavigation.onCommitted:

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

Thanks a lot for your help guys !.

FxckDead
  • 408
  • 6
  • 16
  • Attach your code and procedure to re-generate the issue . – Sam Aug 21 '17 at 06:06
  • executeScript should have runAt: 'document_start', see the documentation. Also, add the actual relevant code in the question. – wOxxOm Aug 21 '17 at 09:28
  • @Sam i just added the code i'm using – FxckDead Aug 21 '17 at 16:47
  • @wOxxOm i just updated the question – FxckDead Aug 21 '17 at 16:48
  • Huh. There's no need for chrome.tabs.query: you can use details.tabId directly. Also, programmatic injection has async overhead so you may have to switch to a content script declared in manifest.json – wOxxOm Aug 21 '17 at 16:52
  • @wOxxOm i have a content script that delete the elements i don't need, but this only is executed in "onReady" event so shows the page can be seen, or you mean another thing ? – FxckDead Aug 21 '17 at 17:32
  • 2
    I mean "run_at": "document_start" in manifest.json. – wOxxOm Aug 21 '17 at 17:38
  • 1
    Related: [Google chrome extension: how to inject script immediately after page reload?](https://stackoverflow.com/q/42151342) – Makyen Aug 21 '17 at 19:22
  • Please [edit] the question to be on-topic: include a [mcve] that duplicates the problem. For Chrome extensions or Firefox WebExtensions this almost always means including your *manifest.json* and some of the background, content, and/or popup scripts/HTML. Questions seeking debugging help ("why isn't this code working the way I want?") must include: (1) the desired behavior, (2) a specific problem or error and (3) the shortest code necessary to reproduce it *in the question itself*. Please also see: [What topics can I ask about here?](//stackoverflow.com/help/on-topic), and [ask]. – Makyen Aug 21 '17 at 19:40
  • @wOxxOm i just tried it, but it doesn't work there; i just read the Makyen link and i think i understood more how events works in extensions – FxckDead Aug 21 '17 at 21:47
  • @Makyen Thanks for the Link, that helped me to understood more how events on extensions works; btw, i will edit now to be more complete the title. – FxckDead Aug 21 '17 at 21:49
  • I'm glad you found a solution to your problem. However, an actual answer/solution should *not* be edited into your Question. In general, you should [edit] the Question to *clarify the Question*, but not to include an Answer within the Question. You should create your own Answer with the code you used to solve your problem, then accept it (the system may require a 48 hour delay prior to accepting your own answer). When you have solved the problem yourself, [answering your own question is encouraged](//stackoverflow.com/help/self-answer). – Makyen Aug 22 '17 at 03:50

0 Answers0