Access-Control-Allow-Origin on chrome extension

Question

I\'m making a Chrome extension which pulls data from my own server. It uses about 4 httpRequests at a time, but sometimes I get console error as follows:

XMLHt

Answer 1

Chrome Extensions have two "modes" when making cross-domain XHR requests:

1) If the domain is in the "permissions" section of the manifest.json file - The request doesn't have an "Origin" header, and it always succeeds.

2) If the domain is not in "permissions" - The request includes an "Origin" header with the value "chrome-extension://..." This indicates that the request is a CORS request, and the response must have a valid Access-Control-Allow-Origin header in order to succeed.

Answer 2

https://developer.chrome.com/extensions/xhr

Read through that documentation and check that your permissions have been setup correctly.

Answer 3

You will need to set up permissions in manifest.json:

  "permissions": [
    "https://example.com/" // if you need a particular site
    "<all_urls>"           // if you need any site (this will incur 
                           // manual review process in Chrome web store, mind you)
  ],

Please note, that since Chrome 85 extn content scripts are subject to the same CORS policy as vanilla web requests. Which means that the only way to do cross-site requests in extn now is to fetch in background script and pass the result to content script:

// Old content script, making a cross-origin fetch:
var itemId = 12345;
var url = "https://another-site.com/price-query?itemId=" +
         encodeURIComponent(request.itemId);
fetch(url)
  .then(response => response.text())
  .then(text => parsePrice(text))
  .then(price => ...)
  .catch(error => ...)

// New content script, asking its background page to fetch the data instead:
chrome.runtime.sendMessage(
    {contentScriptQuery: "queryPrice", itemId: 12345},
    price => ...);

// New extension background page, fetching from a known URL and relaying data:
chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    if (request.contentScriptQuery == "queryPrice") {
      var url = "https://another-site.com/price-query?itemId=" +
              encodeURIComponent(request.itemId);
      fetch(url)
          .then(response => response.text())
          .then(text => parsePrice(text))
          .then(price => sendResponse(price))
          .catch(error => ...)
      return true;  // Will respond asynchronously.
    }
  });

Answer 4

You're trying to do cross origin resource sharing (CORS). The bad news is that without a server as a middle man there is no way to do this on a normal web page. The good news is that in a chrome extension you can request permission to access any url's you want. Just put something like this in your manifest.json file.

Allow connections to your site:

 "permissions": [
    "http://*.radionsm.lv/"
  ],

Allow connections to any site:

 "permissions": [
    "http://*/"
  ],

When the user installs your extension chrome will inform them of the permissions required in a dialogue box prior to the completion of the install.