如何在Chrome擴展程序內容腳本中依次調用一個函數

Question

我的內容腳本中有兩個函數injectChat和firstTimeTrigger。 他們兩個都將腳本附加到DOM主體。

我需要首先運行injectChat，然后完全運行，然后加載firstTimeTrigger。 除非injectChat運行並且已完全加載，否則firstTimeTrigger不起作用。

這是兩個功能-

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

您可以將firstTimeTrigger內部的injectChat作為參數傳遞，並在函數末尾調用它，如下所示：

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

Answer 2

歡迎來到Javascript的回調地獄 :)

為了在上一個腳本完成后運行一個函數，您必須在腳本的load事件結束時調用它。 切記在實際將script元素添加到頁面之前先設置load偵聽器。 例如：

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