Make API Calls from a Chrome Extension
In this guide, I will be going over how you can make API calls from a chrome extension. Developing Chrome Extensions can always be tricky, especially with their many security rules.
If you are trying to make API calls from a chrome extension, you might be running into a painful error:
Access to XMLHttpRequest at from origin has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.According to the MDN Web Docs,
Cross-Origin Resource Sharing (CORS) is an HTTP-header based mechanism that allows a server to indicate any origins (domain, scheme, or port) other than its own from which a browser should permit loading resources. CORS also relies on a mechanism by which browsers make a “preflight” request to the server hosting the cross-origin resource, in order to check that the server will permit the actual request. In that preflight, the browser sends headers that indicate the HTTP method and headers that will be used in the actual request.
Essentially what this means is that Cross-Origin Resource Sharing allows a developer to request resources from another domain web page. For Chrome Extensions, this is strict because of their notoriety of being malware.
To bypass this, you can still use the same way of making API calls.
let apiCall = new XMLHttpRequest();apiCall.open("GET", "<API Call>");apiCall.send();apiCall.onload = () => { console.log(JSON.parse(apiCall.response))}
However, in your manifest.json, you simply have to add to the permissions, the domain of the API.
"permissions": [
.
.
. "https://<domain>"
],
Of course, this field also works with regular expressions. For example, in one of my projects, I am using the Canvas LMS API to get course data from the user (with permission of course).
"permissions": [
.
.
. "https://*.instructure.com/"
],
Anyways, I hope you found this guide useful, and no longer have that nasty CORS error. If you liked it, leave a clap, and check out my project that uses these API call features:
