I’ve got a PWA with a webworker responding to requests at /api/. I also have an extension that goes with the app and I’d love it to be able to make requests of the PWA. I’ve tried a number of ways with no luck and am wondering if/how it’s even possible.

I can in the browser visit: https://myapp.com/api/searchNotes?query=existentialism&limit=10

and it shows a great JSON object served by the app’s service worker grabbing data from the local indexedDB. But when I try to fetch it from the background.js of my extension I instead get an HTML response of the application (it doesn’t run or register the service worker to handle the JSON request).

I have these response headers in the service worker:

export const workerDBHandler = async (req: Request): Promise<Response> => {
  const results = await handleApiRequest(req);
  console.log('inside workerdb coors');
  return new Response(JSON.stringify(results), {
    headers: {
      'Content-Type': 'application/json',
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
      'Access-Control-Allow-Headers': 'Content-Type, Authorization',
    },
  });
};```

host permissions in the extension manifest v3:

```  "host_permissions": ["*://myapp.com/*", "*://localhost:*/*"],```

But running

``` await (await fetch(`https://myapp.com/api/searchNotes?query=${encodeURIComponent(query)}&limit=${limit}`, {
        mode: 'cors'
    }).json();```

returns an error because HTML is returned.  The above command works great if I'm on the app domain but again not from the background.js.

Is there any way for the background.js to interact with the service worker there and not just the HTML?