Questions about the "CORS request did not succeed" error

I am working on updating an old Manifest V2 browser extension that was developed by my employer to Manifest V3. The browser extension is meant to extend the functionality of one of our products.

The product is written in C#. It has two components that are used to communicate with the browser extension.

  • A WebServerForExtension object that receives messages from the browser extension. This object makes use of the SimpleHttpServer class.
  • A BrowserSystemWebSocket object that is used to send replies back to the browser extension.

The background scripts of the browser extension connect to the WebServerForExtension object using the fetch() global function and the BrowserSystemWebSocket object using a WebSocket object.

The problem I am having is that the browser extension cannot connect to the WebServerForExtension object.

The following lines of code demonstrate how I am attempting to connect to the WebServerForExtension object.

const url = `http://127.0.0.1:42042/browser/system/alive?notAnErrorIfNotConnected`;
try {
  const response = await fetch(url);
  if (!response.ok) {
    throw new Error("Response was not OK");
  }
  /* Code that is called when the connection succeeds. */
} catch (error) {
  /* Code that is called when the connection fails. */
}

This fails with the following error.

The status line of the HTTP response is invalid alive
Cross-Origin Request Blocked:
The Same Origin Policy disallows reading the remote resource at http://127.0.0.1:42042/browser/system/alive?notAnErrorIfNotConnected.
(Reason: CORS request did not succeed).
Status code: (null).

The error references the Reason: CORS request did not succeed page. What I do not understand is why CORS is even an issue. CORS means “Cross-Origin Resource Sharing”. How is this Cross-Origin?

This works in Google Chrome. Google Chrome uses Background Service Workers in Manifest V3 extensions. In the Background Service Worker this is considered to be Same-Origin although it would be considered to be Cross-Origin if the same code was called from the content_scripts. This is because the content_scripts are run in the context of the currently loaded web page while the Background Service Worker is run in a separate context. Are things different in Firefox? If so, how are they different?

Also, what changes do I need to make to either the Browser Extension or to the product that the browser extension is attempting to communicate with to resolve this issue?

Did you granted the host permissions?
This may be yet again one of those many cases reported here where the permissions for hosts are not granted on install time in MV3 in Firefox. See also:

You can manually grant it in the “about:addons” page (click your addon and then switch to Permissions tab). Or use permissions.request to ask for host permissions.

Migrating back to MV2 for the Firefox version is also a good option! :slight_smile:

I was able to resolve this issue by modifying my HTTP server to use the Access-Control-Allow-Origin header.