How to avoid Cross-Origin Read Blocking(CORB) in a chrome web extension

See this issue filed by co-founder at Moesif.

https://bugs.chromium.org/p/chromium/issues https://bugs.chromium.org/p/chromium/issues/detail?id=933893

Based on his discussion with Chronium engineers, basically, you should added extraHeaders into extra options for when adding listeners, which will pull this trigger closer to the network and inject the headers before CORB gets triggered.

chrome.webRequest.onHeadersReceived.addListener(details => {
  const responseHeaders = details.responseHeaders.map(item => {
    if (item.name.toLowerCase() === 'access-control-allow-origin') {
      item.value = '*'
    }
  })
  return { responseHeaders };
}, {urls: ['<all_urls>']}, ['blocking', 'responseHeaders', 'extraHeaders'])

Btw, a little self promotion here. Why don't you just use our CORS tool,

https://chrome.google.com/webstore/detail/moesif-orign-cors-changer/digfbfaphojjndkpccljibejjbppifbc?hl=en

It is already the most feature complete CORS tool.

I've found answer in the google docs:

Avoid Cross-Origin Fetches in Content Scripts

Old content script, making a cross-origin fetch:

var itemId = 12345;
var url = "https://another-site.com/price-query?itemId=" +
         encodeURIComponent(request.itemId);
fetch(url)
  .then(response => response.text())
  .then(text => parsePrice(text))
  .then(price => ...)
  .catch(error => ...)

New content script, asking its background page to fetch the data instead:

chrome.runtime.sendMessage(
    {contentScriptQuery: "queryPrice", itemId: 12345},
    price => ...);

New extension background page, fetching from a known URL and relaying data:

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    if (request.contentScriptQuery == "queryPrice") {
      var url = "https://another-site.com/price-query?itemId=" +
              encodeURIComponent(request.itemId);
      fetch(url)
          .then(response => response.text())
          .then(text => parsePrice(text))
          .then(price => sendResponse(price))
          .catch(error => ...)
      return true;  // Will respond asynchronously.
    }
  });

https://www.chromium.org/Home/chromium-security/extension-content-script-fetches