Как вызывать одну функцию за другой в скрипте содержимого Chrome Extension

Question

В моем скрипте контента есть две функции: injectChat и firstTimeTrigger. Они оба прикрепляют скрипт к телу DOM.

Мне нужно сначала запустить injectChat, а после его полного завершения загрузить firstTimeTrigger. firstTimeTrigger не работает, если injectChat не запущен и полностью загружен.

Это две функции -

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);
        }   
    }); 
};

В настоящее время я делаю это так

injectChat();
setTimeout(function(){
   firstTimeTrigger();
}, 3000);

Но это очень ненадежно из-за разного времени загрузки страницы из-за того, что он находится внутри скрипта контента.

Как мне это сделать? Обещания здесь не работают.

Answer 1

Добро пожаловать в обратный вызов Javascript :)

Чтобы запустить функцию после завершения предыдущего скрипта, необходимо вызвать ее в конце события load скрипта. Не забудьте настроить load listener до фактического добавления элемента script на страницу. Например:

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();

Answer 2

Вы можете передать firstTimeTrigger внутри injectChat в качестве параметра и вызвать его в конце функции, например:

function injectChat(firstTimeTrigger) {
  // logic of the injectChat function...
  firstTimeTrigger();
}