Wsrtjtyk

I have two functions injectChat and firstTimeTrigger in my content script. Both of them attach a script to the body of the DOM.

I need injectChat to run first and after it's fully complete then load firstTimeTrigger. firstTimeTrigger doesn't work unless injectChat run and is fully loaded.

These are the two functions -

function injectChat(){

    console.log("Injecting Chat");



    const script = document.createElement('script');

    script.setAttribute("type","text/javascript");

    script.setAttribute("src", `${host}/api/botpress-platform-webchat/inject.js/`);

    script.setAttribute("id", 'botpress-script');

    document.body.appendChild(script);



    script.addEventListener('load', function(){

        const botpress_settings = `window.botpressWebChat.init({host: '${host}'})`;

        const settings = document.createElement('script');

        settings.setAttribute("id", "botpress-settings");

        settings.innerHTML = botpress_settings;

        document.body.appendChild(settings);



    });



};



function firstTimeTrigger(){

    console.log("First Time Trigger");

    chrome.runtime.sendMessage({type: "isFirstTime"}, function(response) {

        if(response == true){

            const botpress_trigger_1 = "window.botpressWebChat.sendEvent({ type: 'show' })";

            const botpress_trigger_2 = `window.botpressWebChat.sendEvent({ type: 'proactive-trigger', platform: 'web', text: '${JSON.stringify(config)}' })`;

            const trigger = document.createElement('script');

            trigger.innerHTML = botpress_trigger_1 + 'n' + botpress_trigger_2;

            document.body.appendChild(trigger);

        }   

    }); 

};

Currently, I've been doing it like this

injectChat();

setTimeout(function(){

   firstTimeTrigger();

}, 3000);

But it's very unreliable because of the various page load times due to this being inside a content script.

How do I make this happen? Promises don't work in here.

You can pass firstTimeTrigger inside of injectChat as a parameter and call it at the end of the function, like this:

function injectChat(firstTimeTrigger) {

  // logic of the injectChat function...

  firstTimeTrigger();

}

Welcome to Javascript's callback hell :)

In order to run a function after the previous script has finished, you have to call it at the end of the script's load event. Remember to set up the load listener before actually adding the script element to the page. For example:

function injectChat(){

    console.log('Injecting Chat');



    const script = document.createElement('script');

    script.setAttribute('type','text/javascript');

    script.setAttribute('src', `${host}/api/botpress-platform-webchat/inject.js/`);

    script.setAttribute('id', 'botpress-script');   

    script.addEventListener('load', injectSettings);  //set up the load listener ...



    document.body.appendChild(script);  //...before adding the script element to the page

}



function injectSettings(){

    console.log('Injecting settings');



    const settings = document.createElement('script');

    settings.setAttribute('id', 'botpress-settings');

    settings.innerHTML = `window.botpressWebChat.init({host: '${host}'})`;

    settings.addEventListener('load', firstTimeTrigger); //set up listener...



    document.body.appendChild(settings);  //...before injecting code

}



function firstTimeTrigger(){

    console.log('First Time Trigger');

    chrome.runtime.sendMessage({type: 'isFirstTime'}, function(response) {

        if(response == true){



            const trigger = document.createElement('script');

            trigger.innerHTML = `

                window.botpressWebChat.sendEvent({ type: 'show' });

                window.botpressWebChat.sendEvent({ type: 'proactive-trigger', platform: 'web', text: ${JSON.stringify(config)} });

            `;

            document.body.appendChild(trigger);

        }   

    }); 

}



injectChat();