Popup HTML auto refresh does not work with Vite 6.0.9+

[sapphi-red]

Describe the bug

Due to a security issue (GHSA-vg6x-rcgg-rjx6), Vite 6.0.9+ now requires a token to connect to the WebSocket endpoint.
Because WXT connects to the WS server on its own, this connection no longer successes.

wxt/packages/wxt/src/sandbox/dev-server-websocket.ts

Lines 43 to 46 in 7c18d9c

	const serverUrl = `${__DEV_SERVER_PROTOCOL__}//${__DEV_SERVER_HOSTNAME__}:${__DEV_SERVER_PORT__}`;
	logger.debug('Connecting to dev server @', serverUrl);
	ws = new WebSocket(serverUrl, 'vite-hmr') as WxtWebSocket;

The way to fix would be to pass config.webSocketToken as a query param (e.g. ?token=${config.webSocketToken}) when connecting to WS server.
https://github.com/vitejs/vite/blob/9654348258eaa0883171533a2b74b4e2825f5fb6/packages/vite/src/node/config.ts#L610-L620
But ideally, it should not connect to the WebSocket server on its own and instead use import.meta.hot.

Reproduction

pnpm dlx wxt@latest init

Steps to reproduce

1. pnpm dlx wxt@latest init
2. pnpm dev
3. Open the extension popup.
4. Edit entrypoints/popup/index.html

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (24) x64 AMD Ryzen 9 5900X 12-Core Processor
    Memory: 11.03 GB / 31.92 GB
  Binaries:
    Node: 22.13.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.9.2 - C:\Program Files\nodejs\npm.CMD
    pnpm: 9.15.3 - C:\Program Files\nodejs\pnpm.CMD
    bun: 1.1.38 - ~\AppData\Local\Microsoft\WinGet\Links\bun.EXE
  Browsers:
    Edge: Chromium (131.0.2903.99)
    Internet Explorer: 11.0.22621.3527

Used Package Manager

pnpm

Validations

• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[aklinker1]

Thanks for the report, will get this fixed. Not sure why I didn't use the HMR API for this originally lol.

---

For my reference, custom events using import.meta.hot:

server.ws.send({
  type: 'custom',
  event: 'special-update',
  data: {}
})

if (import.meta.hot) {
  import.meta.hot.on('special-update', (data) => {
    // perform custom update
  })
}

[aklinker1]

Hmm, yeah, so this doesn't work because import.meta.hot is not defined in the background. The background is not built as an ES module and doesn't include vite/client. If I can include it somehow, that'd be great. Otherwise, we'll have to pass a key manually like you mentioned.

[sapphi-red]

Maybe you can build it as an ES Module and dynamically import it from a classic script?
For manifest v2, adding import('http://localhost:3000/a.js') to .output/chrome-mv2/background.js and placing .output/chrome-mv2/a.js with import 'http://localhost:3000/@vite/client'; console.log('a', import.meta.url) worked.
For manifest v3, I didn't try it but a dynamic import will likely work as well.

[aklinker1]

Yeah, dynamic importing from the dev server might work. Will give it a go in a bit.

[aklinker1]

Looks like non-ESM background scripts can't use dynamic imports:

I got far enough on the PR setting this up that I'm blocked by this. Since WXT defaults to using non-module background scripts, this is not something WXT can fully adopt until it moves away from that.

Additionally, even if you change your background to type: "module", the vite client tries to use the window variable, which isn't in service workers.

So no, WXT cannot use the HMR API, and must connect to the websocket manually.

[aklinker1]

WAIT, tried one last thing and I got something working:

[aklinker1]

Nope, that only works for ESM background scripts. Gonna have to stick with connecting to the websocket manually.