在我想要的之前调用 chrome.tabs.executeScript 的回调，需要解决方法

Question

我在 Google Chrome 中编写了一个扩展程序，可以打开网页选项卡并将代码注入该页面。我还在 chrome.tabs.executeScript 中注册了一个回调，以便在代码完成后调用。然后，此回调将另一个选项卡打开到另一个页面并执行其他操作，但我不希望在第一个选项卡的页面被操作之前发生这种情况。

我的问题是，这个回调在应该被调用的时候被调用，而不是在我希望它被调用的时候被调用：

我注入的代码包含一个 setInterval ，它在执行操作之前检查是否存在某些 DOM 元素页面上，并且我不希望在这些 DOM 元素被执行之前激活回调。

我不知道有什么方法可以让注入的代码与我的扩展页面中的代码进行交互。

有什么方法可以告诉我的扩展页面中的代码可以继续并在正确的时间调用回调吗？

下面是一些代码，解释了我现在正在做的事情：

function doStuffWithTabs() {
    chrome.tabs.create({url: 'some/url/here'}, function(tab) {
        chrome.tabs.executeScript(tab.id, code: "var interval = setInterval(function(){if(jQuery(domElement).length){clearInterval(interval);workMagic();}},1);"}, function(){
            goForthAndConquer();
        });
    }
}

workMagic() 表示操作打开的选项卡的 DOM 的代码，而 goForthAndConquer() 是我想要发生的事情当打开的选项卡的操作完成时。

现在，正如您所看到的，注入的代码只是注册了 setInterval 并立即调用回调。同样，我希望回调发生在 workMagic() 之后。

Answer 1

您需要分两步完成。

script.js:

//I would ditch setInterval in favor of setTimeout
var interval = setInterval(function(){
    if(jQuery(domElement).length){
        clearInterval(interval);
        workMagic();
    }
},15); //15 is recommended minimum

function workMagic() {
    //manipulate dom
    chrome.extension.sendRequest({action: "finished", other: "data"});
}

背景.html:

chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
    if (request.action === 'finished') {
        console.log("dom manipulation is finished in tab #", sender.tab.id);
        goForthAndConquer();
    }
});

function doStuffWithTabs() {
    chrome.tabs.create({url: 'some/url/here'}, function(tab) {
        chrome.tabs.executeScript(tab.id, {file: "script.js"});
    }
}