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的callback hell：）

要在上一个脚本完成后运行功能，必须在脚本的Host:事件末尾调用它。请记住在实际将脚本元素添加到页面之前，先设置HEAD监听器。例如：

Server

如何在Chrome扩展程序内容脚本中依次调用一个函数

2 个答案: