如何在内容脚本中发出跨域请求（尽管 CORS 标头正确，但当前仍被 CORB 阻止）？

根据“Chrome 扩展内容脚本中对跨域请求的更改”中的示例，我将所有调用替换为新方法，该方法具有类似的 API，但将调用委托给后台页面：fetchfetchResourcefetch

// contentScript.js
function fetchResource(input, init) {
  return new Promise((resolve, reject) => {
    chrome.runtime.sendMessage({input, init}, messageResponse => {
      const [response, error] = messageResponse;
      if (response === null) {
        reject(error);
      } else {
        // Use undefined on a 204 - No Content
        const body = response.body ? new Blob([response.body]) : undefined;
        resolve(new Response(body, {
          status: response.status,
          statusText: response.statusText,
        }));
      }
    });
  });
}

// background.js
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
  fetch(request.input, request.init).then(function(response) {
    return response.text().then(function(text) {
      sendResponse([{
        body: text,
        status: response.status,
        statusText: response.statusText,
      }, null]);
    });
  }, function(error) {
    sendResponse([null, error]);
  });
  return true;
});

这是我能够对我的应用程序进行修复该问题的最小更改集。（请注意，扩展和后台页面只能在它们之间传递 JSON 可序列化对象，因此我们不能简单地将 Fetch API 响应对象从后台页面传递到扩展。

后台页面不受 CORS 或 CORB 的影响，因此浏览器不再阻止来自 API 的响应。

警告！必须在 manifest.json 中添加 URL：

• 对于 ManifestV3"host_permissions": ["*://*.example.com/"]
• 对于 ManifestV2 中"permissions": ["*://*.example.com/"]

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

为了提高安全性，自 Chrome 85 起，Chrome 扩展程序中不允许从内容脚本进行跨域提取。此类请求可以从扩展后台脚本发出，并在需要时中继到内容脚本。

您可以这样做来避免跨源。

旧内容脚本，进行跨域提取：

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 => ...)

新的内容脚本，要求其后台页面获取数据：

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

新的扩展后台页面，从已知 URL 获取并中继数据：

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.
    }
  });

允许 URL in manifest.json （更多信息）：

• ManifestV2（经典）："permissions": ["https://another-site.com/"]
• ManifestV3（即将推出）："host_permissions": ["https://another-site.com/"]

临时解决方案：使用运行命令浏览器禁用 CORB --disable-features=CrossSiteDocumentBlockingAlways,CrossSiteDocumentBlockingIfIsolating

Linux 上的示例运行命令。

对于 Chrome：

chrome %U --disable-features=CrossSiteDocumentBlockingAlways,CrossSiteDocumentBlockingIfIsolating

对于 Chromium：

chromium-browser %U --disable-features=CrossSiteDocumentBlockingAlways,CrossSiteDocumentBlockingIfIsolating

类似的问题。

来源。