Chrome 扩展 - 尝试使用清单 v3 从后台脚本中获取 () 时出现 CORS 错误

Question

当我尝试从 Chrome 扩展程序的后台脚本发出请求时，出现 CORS 错误。后台脚本与webpack捆绑在一起。

注意：如果我将 manifest.json 转换为版本 2 - 一切正常。但是对于 v3 它给出了

Access to fetch at 'https://example.com/api/user/login' from origin 'chrome-extension://exampleid' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

manifest.json

{
  "name": "__CE_APP_NAME__",
  "version": "__CE_APP_VERSION__",
  "manifest_version": 3,
  "background": {
    "service_worker": "background.bundle.js",
    "type": "module"
  },
  "content_scripts": [
    {
      "matches": [
        "https://example.com/*"
      ],
      "js": ["content.bundle.js"]
    }
  ],
  "web_accessible_resources": [
    {
      "resources": [ "images/*", "*.css" ],
      "matches": [
        "https://example.com/*"
      ]
    }
  ],
  "permissions": [
    "storage",
    "unlimitedStorage",
    "cookies",
    "identity"
  ],
  "host_permissions": [
    "<all_urls>"
  ]
}

background.js

chrome.runtime.onMessage.addListener((req) => {
  if (req.type === 'auth/login') {
    login(req.payload);
  }

  return true;
});

interface LoginCredentials {
  email: string;
  password: string;
}

const login = (data: LoginCredentials) => {
  fetch(`${API_BASE_URL}/user/login`, {
    method: 'POST',
    body: new URLSearchParams({
      email: data.email,
      password: data.password
    })
  })
    .then((response) => console.log(response))
    .catch((error) => console.log(error));
};

Answer 1

这是我的解决方案：

我认为它没有用，因为我只是在做 Load Unpacked，希望它能刷新扩展。我想它没有完全刷新，所以需要做的是一个额外的步骤。在插件页面点击插件右下角的刷新按钮。

希望很快会有更好的自动化方式来进行某种热重载。

Answer 2

这就是我解决这个问题的方法（附加到清单）：

"content_security_policy": {
  "extension_pages": "default-src 'self'; connect-src https://* data: blob: filesystem:;"
}

default-src 'self' 并且 chrome 网上商店无论如何都会要求它。如果不设置会报错：
必须指定 CSP 指令 'script-src'（显式或通过 'default-src' 隐式指定）并且必须仅将安全资源列入白名单。
connect-src https://* data: blob: filesystem:; 需要通过 cors 和

Applies to XMLHttpRequest (AJAX), WebSocket, fetch(), or EventSource. If not allowed the browser emulates a 400 HTTP status code.

我找到了信息 here

Answer 3

这是 Chrome 的一个错误，它在重新启用扩展程序时没有应用正确的策略主机设置。如果您使用的是“94.0.4606.54（官方版本）”以下的任何版本，您必须在重新启用扩展后手动重新加载（单击刷新按钮）。

报错后here I was informed that the bug was fixed with this commit，将成为Chrome94.

的一部分

如果您现在下载 Beta 版，您会注意到错误已修复，并将于 2021 年 9 月 21 日（明天，截至本回答）正式发布。您可以查看时间表here

Chrome 扩展 - 尝试使用清单 v3 从后台脚本中获取 () 时出现 CORS 错误

Chrome Extension - Getting CORS error when trying to fetch() from background script with manifest v3

javascript

google-chrome-extension

cors

service-worker

chrome-extension-manifest-v3