1

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

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

CORS 策略已阻止从源“chrome-extension://exampleid”获取“https://example.com/api/user/login”的访问权限：不存在“Access-Control-Allow-Origin”标头在请求的资源上。如果不透明的响应满足您的需求，请将请求的模式设置为“no-cors”以获取禁用 CORS 的资源。

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

3 回答 3

2

这是 Chrome 的错误，它在重新启用扩展程序时未应用正确的策略主机设置。如果您使用低于“94.0.4606.54 (Official Build)”的任何版本，您必须在重新启用扩展后手动重新加载（单击刷新按钮）。

在这里报告错误后，我被告知该错误已通过此提交修复，它将成为 Chrome 94 的一部分。

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

于 2021-09-20T21:45:33.103 回答
0

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

"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 和

适用于 XMLHttpRequest (AJAX)、WebSocket、fetch() 或 EventSource。如果不允许，浏览器会模拟 400 HTTP 状态代码。

我在这里找到了信息

于 2021-08-22T17:34:16.833 回答
-1

这是我的解决方案：

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

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

于 2021-07-16T18:54:48.887 回答