[Feat] Support content.css HMR (#799)

Co-authored-by: Jonghakseo <[email protected]>

chrome-extension/manifest.js

@@ -55,6 +55,7 @@ const manifest = deepmerge(
       },
       {
         matches: ['http://*/*', 'https://*/*', '<all_urls>'],
+        js: ['refresh.js'], // for public's HMR(refresh) support
         css: ['content.css'], // public folder
       },
     ],

chrome-extension/public/refresh.js

@@ -0,0 +1,72 @@
+/* eslint-disable */
+(function () {
+  'use strict';
+  // This is the custom ID for HMR (chrome-extension/vite.config.mts)
+  const __HMR_ID = 'chrome-extension-hmr';
+
+  const LOCAL_RELOAD_SOCKET_PORT = 8081;
+  const LOCAL_RELOAD_SOCKET_URL = `ws://localhost:${LOCAL_RELOAD_SOCKET_PORT}`;
+
+  const DO_UPDATE = 'do_update';
+  const DONE_UPDATE = 'done_update';
+
+  class MessageInterpreter {
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    constructor() {}
+
+    static send(message) {
+      return JSON.stringify(message);
+    }
+
+    static receive(serializedMessage) {
+      return JSON.parse(serializedMessage);
+    }
+  }
+
+  function initClient({ id, onUpdate }) {
+    const ws = new WebSocket(LOCAL_RELOAD_SOCKET_URL);
+
+    ws.onopen = () => {
+      ws.addEventListener('message', event => {
+        const message = MessageInterpreter.receive(String(event.data));
+
+        if (message.type === DO_UPDATE && message.id === id) {
+          onUpdate();
+          ws.send(MessageInterpreter.send({ type: DONE_UPDATE }));
+          return;
+        }
+      });
+    };
+  }
+
+  function addRefresh() {
+    let pendingReload = false;
+
+    initClient({
+      id: __HMR_ID,
+      onUpdate: () => {
+        // disable reload when tab is hidden
+        if (document.hidden) {
+          pendingReload = true;
+          return;
+        }
+        reload();
+      },
+    });
+
+    // reload
+    function reload() {
+      pendingReload = false;
+      window.location.reload();
+    }
+
+    // reload when tab is visible
+    function reloadWhenTabIsVisible() {
+      !document.hidden && pendingReload && reload();
+    }
+
+    document.addEventListener('visibilitychange', reloadWhenTabIsVisible);
+  }
+
+  addRefresh();
+})();

chrome-extension/vite.config.mts

@@ -23,7 +23,7 @@ export default defineConfig({
     }) as PluginOption,
     watchPublicPlugin(),
     makeManifestPlugin({ outDir }),
-    isDev && watchRebuildPlugin({ reload: true }),
+    isDev && watchRebuildPlugin({ reload: true, id: 'chrome-extension-hmr' }),
   ],
   publicDir: resolve(rootDir, 'public'),
   build: {

packages/hmr/lib/plugins/watch-rebuild-plugin.ts

@@ -12,14 +12,14 @@ const refreshCode = fs.readFileSync(path.resolve(injectionsPath, 'refresh.js'),
 const reloadCode = fs.readFileSync(path.resolve(injectionsPath, 'reload.js'), 'utf-8');
 
 export function watchRebuildPlugin(config: PluginConfig): PluginOption {
+  const { refresh, reload, id: _id, onStart } = config;
+  const hmrCode = (refresh ? refreshCode : '') + (reload ? reloadCode : '');
+
   let ws: WebSocket | null = null;
 
-  const id = Math.random().toString(36);
+  const id = _id ?? Math.random().toString(36);
   let reconnectTries = 0;
 
-  const { refresh, reload } = config;
-  const hmrCode = (refresh ? refreshCode : '') + (reload ? reloadCode : '');
-
   function initializeWebSocket() {
     ws = new WebSocket(LOCAL_RELOAD_SOCKET_URL);
 
@@ -46,7 +46,7 @@ export function watchRebuildPlugin(config: PluginConfig): PluginOption {
   return {
     name: 'watch-rebuild',
     writeBundle() {
-      config.onStart?.();
+      onStart?.();
       if (!ws) {
         initializeWebSocket();
         return;

packages/hmr/lib/types.ts

@@ -16,4 +16,5 @@ export type PluginConfig = {
   onStart?: () => void;
   reload?: boolean;
   refresh?: boolean;
+  id?: string;
 };