javascript - 有没有办法在不锁定整个浏览器的情况下使用 chrome.webRequest 暂停 HTTP 请求？

Question

我想向用户显示用 chrome.webRequest.onBeforeSendHeaders 截获的 header 以供编辑，最好使用 chrome.tabs.executeScript。但是， chrome.tabs.executeScript 是异步的，我无法找到一种方法来等待它返回而不卡住整个浏览器。

换句话说，我的目标是下面的代码给出的内容，除了 HTML UI 并且不卡住任何不相关的选项卡。

chrome.webRequest.onBeforeSendHeaders.addListener(
    function(details) {
    for (var i = 0; i < details.requestHeaders.length; ++i) {
      if (details.requestHeaders[i].name === 'User-Agent') {
          var foo = prompt('User-Agent', details.requestHeaders[i].value);
          // chrome.tabs.executeScript(details.tabId,{code:""});
          //^create a nice HTML overlay & pass the user input back
          details.requestHeaders[i].value = foo;
         break;
      }
    }
    return {requestHeaders: details.requestHeaders};
  },
  {urls: ["http://*/*"], types: ["main_frame"]},
  ["blocking", "requestHeaders"]);

如果不可能，那也很高兴知道，因为我可以提交功能请求。

Answer 1

您应该使用 promise ，您可以(例如)创建一个 sleep 命令来阻止当前线程，直到 X 秒后(或完成标题编辑后)返回 promise 值:

const sleep = async seconds => {
    return new Promise(async(resolve)=>{
        setTimeout(resolve, seconds * 1000);
    });
}

请注意，异步函数必须在异步线程上调用，因此您应该在异步函数内启动您的应用程序(或只是您的监听器函数)。如果你愿意，这可以是一个匿名函数(也就是一个没有名字的函数):

(async()=>{
    await sleep(2);
    // do something after waiting 2 seconds.
})();

在您的情况下，一个工作示例是将您的阻塞监听器函数声明为异步，如下所示:

const promptUserToEditHeaders = async details => {
    return new Promise(async(resolve)=>{
        // prompt the user to edit the request headers
        // then call resolve() when you are done editing headers
    });
}

chrome.webRequest.onBeforeSendHeaders.addListener(
    async details => {
        await promptUserToEditHeaders(details);
    },
    {urls: ["http://*/*"], types: ["main_frame"]},
    ["blocking", "requestHeaders"]
);

阅读有关 JavaScript promise 的更多信息: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference .

阅读有关异步和等待的更多信息: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function

Promises 和 async/await 都是进行异步调用的非常有用的方法。