0

I just started a chrome extension yesterday so I am fairly new, please excuse my noob questions.

I have a popup.js which displays contents in popup.html - So popup.js is simple

popup.js

$(document).ready(function () {
    chrome.tabs.getSelected(null, function (tab) {
        chrome.runtime.sendMessage({
            tab: tab
        }, function (response) {

            document.getElementById("lockDiv").hidden = false;
            document.getElementById("loadingDiv").hidden = true;

        });       

    });
});

It gets the selected tab, sends a message (with tab) to event page which is the following

eventPage.js

chrome.runtime.onMessage.addListener(function (tab) { 

    chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
        setInterval(function () {
           // Do something after 5 seconds          
        }, 5000);
    });   
});

Now it works (sort of) but as soon as popup.js runs, there is no delay for 5 seconds before this executes 

        document.getElementById("lockDiv").hidden = false;
        document.getElementById("loadingDiv").hidden = true;

The above executes without waiting for the response from eventPage.js

How can I make this to wait for a response and let the operation in evenPage.js to finish before showing executed the above code?

Ali
  • 2,702
  • 3
  • 32
  • 54
  • Add `return true` before exiting onMessage listener. And use `sendResponse` in onMessage listener. – wOxxOm Nov 09 '17 at 04:18

1 Answers1

-1

Having read Mozilla's documentation for onMessage - (it should work the same as chrum extension as mozilla web extensions are based on Chrum) -conentrating on the part about "To send a response asynchronously" - you can do the following (apparently)

eventPage.js

chrome.runtime.onMessage.addListener(function (tab) { 
    chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
        return new Promise(resolve => {
            setInterval(function () {
            // Do something after 5 seconds          
            resolve(resultYouWantToReturn)
            }, 5000);
        });
    });   
});

popup.js

chrome.runtime.sendMessage({
    tab: tab
}, function (response) {
    response.then(resultFromListener => {
        // resultFromListener is the value resolved (resultYouWantToReturn) above
        document.getElementById("lockDiv").hidden = false;
        document.getElementById("loadingDiv").hidden = true;
    });
});
Jaromanda X
  • 53,868
  • 5
  • 73
  • 87
  • 1
    Chrome API doesn't work with Promises. The OP needs `return true` in onMessage as explained in the documentation. – wOxxOm Nov 09 '17 at 04:19
  • interesting - MDN documentation doesn't mention that inconsistency. Surprising since Mozilla is basing it's API on Chrome – Jaromanda X Nov 09 '17 at 04:20
  • Promises work with `browser` namespace, which is WebExtension API, not Chrome API. – wOxxOm Nov 09 '17 at 04:22
  • question is tagged google-chrome-extension - I assumed from the tag info that it was indeed about what is now called a Web Extension – Jaromanda X Nov 09 '17 at 04:24