I'm getting a CORS error when I try to do a request from my Chrome Extensions's background script. The background script is bundled with webpack.
Note: If I convert manifest.json to version 2 - all works fine. But with v3 it gives
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));
};