等待浏览器的响应。

Question

我已经成功地使用了浏览器。 等待浏览器。在Content Script Inject.js中，sendResponse应在1000ms超时之后调用。

我附上了一个简约的例子。任何想法等待浏览器.tabs.sendmessage 返回什么SendResponse仅在Chrome中设置，而不是在Firefox中设置？

//inject.js
(async () => {
    if (typeof browser === "undefined") {
        var browser = chrome;
    }

    browser.runtime.onMessage.addListener((msg, sender, sendResponse) => {
        console.log(msg);
        setTimeout(function(){
            let pageObject = {a:1};
             sendResponse(pageObject);
        },1000)
        return true;
    });

})();



//background.js
(async () => {
      if (typeof browser === "undefined") {
        var browser = chrome;
      }


//**code for injecting content scripts on extension reload**

  browser.runtime.onInstalled.addListener(async () => {
    let manifest = browser.runtime.getManifest();
    for (const cs of manifest.content_scripts) {
      for (const tab of await browser.tabs.query({ url: cs.matches })) {
        browser.scripting.executeScript({
          target: { tabId: tab.id },
          files: cs.js,
        });
      }
    }
  });

      async function SendMessageToFront(message) {
        let resolve;
        const promise = new Promise(r => resolve = r);
        browser.tabs.query({}, async function (tabs) {
          for (let index = 0; index < tabs.length; index++) {
            const tab = tabs[index];
    
            if (tab.url) {
              let url = new URL(tab.url)
              if (url.hostname.includes("tragetdomain.com")) {
                var startTime = performance.now()
                let response = await browser.tabs.sendMessage(tab.id, { message: message });
                var endTime = performance.now()
                console.log(`Call to doSomething took ${endTime - startTime} milliseconds`) // this takes 0ms
    
                console.log("got response");
                console.log(response); // this is undefined
                console.log(browser.runtime.lastError); // this is empty
                resolve(response);
                break;
              }
            }
          }
        });
    
        return promise;
      }


      await SendMessageToFront();
})();
  

Answer 1

我想对于Firefox中的测试，您可以重新加载背景脚本（F5或DevTools中的特定按钮）
正如您对背景进行了编码一样，您几乎没有希望得到答案，因为每次您重新加载背景时，都会用注入页面中的所有内容脚本打破电线。
将浏览器检查在“ sendmessagetofront”功能中。将“ sendmessagetofront”函数（不需要async）移至主线程中，并在主线程中运行该函数。

/*async*/ function SendMessageToFront(message) {
    if (typeof browser === "undefined")
        var browser = chrome;
    let resolve;
    const promise = new Promise(r => resolve = r);
    browser.tabs.query({}, async function(tabs) {
        for (let index = 0; index < tabs.length; index++) {
            const tab = tabs[index];
            if (tab.url) {
                let url = new URL(tab.url);
                if (url.hostname.includes("tragetdomain.com")) {
                    var startTime = performance.now()
                    let response = await browser.tabs.sendMessage(tab.id, {'message': message});
                    var endTime = performance.now()
                    console.log(`Call to doSomething took ${endTime - startTime} milliseconds`) // this takes 0ms
                    console.log("got response");
                    console.log(response); // this is undefined
                    console.log(browser.runtime.lastError); // this is empty
                    resolve(response);
                    break
                }
            }
        }
    });
    return promise
}

(async _ => {
    await SendMessageToFront()
})();

通过这种方式，您一旦准备就绪后，您就会收到一条错误消息，这告诉您另一侧的内容脚本不存在或尚未准备就绪，但是现在，当内容脚本准备就绪时，您应该只有从背景脚本DevTools重新启动函数

(async _ => {
    await SendMessageToFront()
})();

，您将获得正确的答案{a：1}