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

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

  "permissions": [
    "https://example.com/" // if you need a particular site
    ""           // 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.
    }
  });