feat: Keyboard shortcut to reopen the browser without restarting the dev command (#1211)

Co-authored-by: Aaron <[email protected]>
Co-authored-by: Florian Metz <[email protected]>

Author: 3 people

Diff for: packages/wxt/src/core/create-server.ts

@@ -27,6 +27,7 @@ import {
   getContentScriptJs,
   mapWxtOptionsToRegisteredContentScript,
 } from './utils/content-scripts';
+import { createKeyboardShortcuts } from './keyboard-shortcuts';
 
 /**
  * Creates a dev server and pre-builds all the files that need to exist before loading the extension.
@@ -108,9 +109,13 @@ async function createServerInternal(): Promise<WxtDevServer> {
       // Listen for file changes and reload different parts of the extension accordingly
       const reloadOnChange = createFileReloader(server);
       server.watcher.on('all', reloadOnChange);
+      keyboardShortcuts.start();
+      keyboardShortcuts.printHelp();
     },
+
     async stop() {
       wasStopped = true;
+      keyboardShortcuts.stop();
       await runner.closeBrowser();
       await builderServer.close();
       await wxt.hooks.callHook('server:closed', wxt, server);
@@ -136,11 +141,14 @@ async function createServerInternal(): Promise<WxtDevServer> {
     },
     async restartBrowser() {
       await runner.closeBrowser();
+      keyboardShortcuts.stop();
       await wxt.reloadConfig();
       runner = await createExtensionRunner();
       await runner.openBrowser();
+      keyboardShortcuts.start();
     },
   };
+  const keyboardShortcuts = createKeyboardShortcuts(server);
 
   const buildAndOpenBrowser = async () => {
     // Build after starting the dev server so it can be used to transform HTML files
@@ -230,6 +238,7 @@ function createFileReloader(server: WxtDevServer) {
             break;
           case 'content-script-reload':
             reloadContentScripts(changes.changedSteps, server);
+
             const rebuiltNames = changes.rebuildGroups
               .flat()
               .map((entry) => entry.name);

Diff for: packages/wxt/src/core/keyboard-shortcuts.ts

@@ -0,0 +1,60 @@
+import readline from 'node:readline';
+import { WxtDevServer } from '../types';
+import { wxt } from './wxt';
+import pc from 'picocolors';
+
+export interface KeyboardShortcutWatcher {
+  start(): void;
+  stop(): void;
+  printHelp(): void;
+}
+
+/**
+ * Function that creates a keyboard shortcut handler for the extension.
+ */
+export function createKeyboardShortcuts(
+  server: WxtDevServer,
+): KeyboardShortcutWatcher {
+  let isWatching = false;
+  let rl: readline.Interface | undefined;
+
+  const handleInput = (line: string) => {
+    // Only handle our specific command
+    if (line.trim() === 'o') {
+      server.restartBrowser();
+    }
+  };
+
+  return {
+    start() {
+      if (isWatching) return;
+
+      rl = readline.createInterface({
+        input: process.stdin,
+        terminal: false, // Don't intercept ctrl+C, ctrl+Z, etc
+      });
+
+      rl.on('line', handleInput);
+      isWatching = true;
+    },
+
+    stop() {
+      if (!isWatching) return;
+
+      if (rl) {
+        rl.close();
+        rl = undefined;
+      }
+
+      isWatching = false;
+    },
+
+    printHelp() {
+      if (!wxt.config.runnerConfig.config.disabled) {
+        wxt.logger.info(
+          `${pc.dim('Press')} ${pc.bold('o + enter')} ${pc.dim('to reopen the browser')}`,
+        );
+      }
+    },
+  };
+}