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

问题描述

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

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

从源“chrome-extension://exampleid”获取“https://example.com/api/user/login”的访问权限已被 CORS 政策阻止：无“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));
};

解决方法

这是我的解决方案：

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

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