Dev client worker capturing /_favicon/ request in chrome manifest v3

[stevezhu]

Build tool

Vite

Where do you see the problem?

• [X] In the browser
• [ ] In the terminal

Describe the bug

I'm attempting to use the /_favicon/ api from chrome manifest v3 shown here: https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/api/favicon

It seems that due to the hmr client worker capturing all requests during dev, the requests to /_favicon/ are also being captured instead of being handled by chrome.

Reproduction

Use https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/api/favicon with @crxjs/vite-plugin in dev mode.

Logs

Failed request (when client worker is capturing requests):

Request URL: http://localhost:5173/_favicon/?pageUrl=https%3A%2F%2Fwww.google.com%2F&size=64&t=1672027377433
Request Method: GET
Status Code: 404 Not Found
Remote Address: 127.0.0.1:5173
Referrer Policy: strict-origin-when-cross-origin

Expected successful request:

Request URL: chrome-extension://<id>/_favicon/?pageUrl=https%3A%2F%2Fwww.google.com%2F&size=64
Request Method: GET
Status Code: 200 OK (from memory cache)
Referrer Policy: strict-origin-when-cross-origin

System Info

System:
    OS: macOS 13.0.1
    CPU: (8) x64 Intel(R) Core(TM) i5-1038NG7 CPU @ 2.00GHz
    Memory: 453.57 MB / 16.00 GB
    Shell: 3.5.1 - /usr/local/bin/fish
  Binaries:
    Node: 18.8.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 8.18.0 - /usr/local/bin/npm
  npmPackages:
    @crxjs/vite-plugin: 2.0.0-beta.9 => 2.0.0-beta.9
    vite: ^4.0.1 => 4.0.1

Severity

annoyance

[zhaoguangyue]

When is it expected to be repaired

[mj2ks]

@stevezhu Found a solution?

[alajmo]

I included a fix to this issue, if it's not merged, you can link it locally, just make these changes:

async function sendToServer(url: URL): Promise<Response> {
  if (url.href.includes('/_favicon/')) {
    const response = await fetch(url.href)
    return new Response(response.body, {
      headers: {
        'Content-Type': response.headers.get('Content-Type') ?? 'text/javascript',
      },
   })
  }

  // change the url to point to the dev server
  url.protocol = 'http:'
  url.host = 'localhost'
  url.port = __SERVER_PORT__
  // add a timestamp to force Chrome to do a new request
  url.searchParams.set('t', Date.now().toString())
  // URLSearchParams adds "=" to every empty param & vite doesn't like it
  const response = await fetch(url.href.replace(/=$|=(?=&)/g, ''))
  // circumvent extension CSP by creating response from extension origin
  return new Response(response.body, {
    headers: {
      'Content-Type': response.headers.get('Content-Type') ?? 'text/javascript',
    },
  })
}

[gp0119]

The problem still exists.