I am trying to get data from an external API from the background script of my Chrome extension, using messaging to initiate the call from the content script and get the results. I have no control over the external API. The documentation from that API says to use script tags to get a jsonp response, but if I understand correctly, that shouldn't matter when the below items are implemented. Am I wrong?
fetch()
is in the background script"\*://\*/"
is in my permissions in the manifest (I will change that if I can get this to work, just eliminating that possibility)Error: Access to fetch at 'https://external-api.com' from origin 'chrome-extension://bunchofchars' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: 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.
Any clue as to what I'm doing wrong?
background.js
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
fetch('https://api.com/' + request.user + 'restofurl',
{
method: 'get',
headers: {'Content-Type':'application/json'}
})
// .then(response => parseResults(response.results))
.then(response => sendResponse({result: response.results}))
// .catch(error => ...)
return true;
});
content.js
(() => {
function foo() {
var parent = document.getElementById('someId');
var username = parent.getElementsByTagName('a')[6].innerHTML;
chrome.runtime.sendMessage({user: username}, function(response) {
console.log(response.result);
});
window.addEventListener('load', foo);
})();
Manifest version 3 uses the host_permissions field
"host_permissions": ["https://api.com/*"],
Maybe your extension is allowed only to read and modify on this particular site.
Let extensions read and change site data
- When you click the extension: This setting only allows the extension to access the current site in the open tab or window when you click the extension. If you close the tab or window, you’ll have to click the extension to turn it on again.
- On [current site]: Allow the extension to automatically read and change data on the current site.
- On all sites: Allow the extension to automatically read and change data on all sites.
Try to change to the last option. This should change CORS policy.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With