Code injection into Gmail via a Google Chrome extension - how to make sure that my script gets injected when it has finished loading?

Question

I'm creating a Google Chrome extension that adds some extra functionality to Gmail by injecting a script that I've written. By 'injected script' please see this definition.

To do this, my content script matches on ["https://mail.google.com/mail/*"].

However, the problem with this is that this is the same URL for when Gmail is loading and has finished loading. As a result, my script appears to sometimes to get injected too early, while Gmail is still loading, leading to reference errors.

To try to circumvent this problem, I'm only running my script on load by doing: window.addEventListener("load", runInjectedScript);

And in my content script (which does the injecting), it only injects when this conditional is true: if (window.self === window.top).

Yet, these measures do not seem to guarantee that my script will always get injected at the right time, once Gmail has finished loading and the inbox appears. How can I ensure that this happens? Are there any techniques that I haven't implemented?

Answer 1

You could potentially run a setInterval checking to see if the data you're intercepting in Gmail is available yet.

var gmailLoaded = setInterval(function () {
    if (typeof GMAIL !== 'undefined') {
        runInjectedScript();
        clearInterval(gmailLoaded);
    }
}, 100);

You'll need to replace GMAIL with whatever you're trying to reference from Gmail. You could also use the same approach above checking to see if the loading state is active, however that may add additional overhead.