Dev mode: reconnect the background's dev-server WebSocket after it closes

Open
#2,707 1 comment 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
52/100
Issue type
Feature
Clarity
Mostly clear
Activity status
Active
Tech stack
typescript

Research direction

Start by reading packages/wxt/src/utils/internal/dev-server-websocket.ts, especially getDevServerWebSocket and its close handler; compare its behavior with the described patch to dist/virtual/background-entrypoint.mjs. Check how the dev server is probed and how the background reloads matching tabs. Done means a dev-only background recovers after the server restarts or the socket drops, and hot reload resumes without manually reloading the extension.

Written by the indexing model from the issue text.

Description

Feature Request

In dev mode, the background script reconnects to the dev server after its WebSocket closes.

With webExt: { disabled: true } (Chrome ignores --load-extension, so the dev build is loaded unpacked by hand), the extension outlives each wxt dev run. getDevServerWebSocket in packages/wxt/src/utils/internal/dev-server-websocket.ts opens the socket once; on close it only logs "Disconnected from dev server", and ws keeps the closed socket, so the background never connects again. After a dev-server restart or a dropped socket, every later build reaches nobody, and hot reload stops until the extension is reloaded by hand at chrome://extensions.

Proposal: on close, the background probes the dev server every few seconds. When it answers, the background calls browser.runtime.reload(), and the fresh background reloads the tabs its content scripts match, because the reload cuts their content scripts off from the extension. We run this today as a patch of dist/virtual/background-entrypoint.mjs on 0.21.5 (about 30 lines, dev build only).

Is your feature request related to a bug?

N/A

What are the alternatives?
  • Reconnect the socket in place and attach the listeners again: builds made while the socket was down are lost, so the extension can run stale code until the next edit.
  • Reload the extension by hand after each dev-server restart: what users do today.
Additional context

wxt 0.21.5, Chrome on macOS. The main branch has the same dev-server-websocket.ts code.

Dominant language
TypeScript
Stars
10.7k
Forks
585
Avg merge
2d 5h
Merged PRs (30d)
45

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from wxt-dev/wxt

All issues in wxt-dev/wxt

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.