[Enhance] modify to detect and reload manifest changes (#266)

manifest.ts → manifest.js

@@ -1,9 +1,10 @@
-import packageJson from './package.json';
+import packageJson from './package.json' assert { type: 'json' };
 
 /**
  * After changing, please reload the extension at `chrome://extensions`
+ * @type {chrome.runtime.ManifestV3}
  */
-const manifest: chrome.runtime.ManifestV3 = {
+const manifest = {
   manifest_version: 3,
   name: packageJson.name,
   version: packageJson.version,
@@ -22,7 +23,7 @@ const manifest: chrome.runtime.ManifestV3 = {
     newtab: 'src/pages/newtab/index.html',
   },
   icons: {
-    '128': 'icon-128.png',
+    128: 'icon-128.png',
   },
   content_scripts: [
     {

utils/plugins/make-manifest.ts

@@ -6,13 +6,14 @@ import type { PluginOption } from 'vite';
 
 const { resolve } = path;
 
-const distDir = resolve(__dirname, '..', '..', 'dist');
+const rootDir = resolve(__dirname, '..', '..');
+const distDir = resolve(rootDir, 'dist');
+const manifestFile = resolve(rootDir, 'manifest.js');
 
-export default function makeManifest(
-  manifest: chrome.runtime.ManifestV3,
-  config: { contentScriptCssKey?: string },
-): PluginOption {
-  function makeManifest(to: string) {
+const getManifestWithCacheBurst = () => import(manifestFile + '?' + Date.now().toString());
+
+export default function makeManifest(config: { contentScriptCssKey?: string }): PluginOption {
+  function makeManifest(manifest: chrome.runtime.ManifestV3, to: string) {
     if (!fs.existsSync(to)) {
       fs.mkdirSync(to);
     }
@@ -32,8 +33,12 @@ export default function makeManifest(
 
   return {
     name: 'make-manifest',
-    writeBundle() {
-      makeManifest(distDir);
+    buildStart() {
+      this.addWatchFile(manifestFile);
+    },
+    async writeBundle() {
+      const manifest = await getManifestWithCacheBurst();
+      makeManifest(manifest.default, distDir);
     },
   };
 }

utils/plugins/watch-rebuild.ts

@@ -1,21 +1,12 @@
 import type { PluginOption } from 'vite';
-import { resolve } from 'path';
 import { WebSocket } from 'ws';
 import MessageInterpreter from '../reload/interpreter';
 import { LOCAL_RELOAD_SOCKET_URL } from '../reload/constant';
 
-const rootDir = resolve(__dirname, '..', '..');
-const manifestFile = resolve(rootDir, 'manifest.ts');
-const viteConfigFile = resolve(rootDir, 'vite.config.ts');
-
 export default function watchRebuild(): PluginOption {
   const ws = new WebSocket(LOCAL_RELOAD_SOCKET_URL);
   return {
     name: 'watch-rebuild',
-    buildStart() {
-      this.addWatchFile(manifestFile);
-      this.addWatchFile(viteConfigFile);
-    },
     writeBundle() {
       /**
        * When the build is complete, send a message to the reload server.

utils/reload/initReloadClient.ts

@@ -6,9 +6,11 @@ let needToUpdate = false;
 export default function initReloadClient({
   watchPath,
   onUpdate,
+  onForceReload,
 }: {
   watchPath: string;
   onUpdate: () => void;
+  onForceReload?: () => void;
 }): WebSocket {
   const socket = new WebSocket(LOCAL_RELOAD_SOCKET_URL);
 
@@ -34,6 +36,10 @@ export default function initReloadClient({
         }
         return;
       }
+      case 'force_reload': {
+        onForceReload?.();
+        return;
+      }
     }
   });
 

utils/reload/initReloadServer.ts

@@ -5,6 +5,7 @@ import MessageInterpreter from './interpreter';
 import { debounce } from './utils';
 
 const clientsThatNeedToUpdate: Set<WebSocket> = new Set();
+let needToForceReload = false;
 
 function initReloadServer() {
   const wss = new WebSocketServer({ port: LOCAL_RELOAD_SOCKET_PORT });
@@ -25,6 +26,12 @@ function initReloadServer() {
       }
       if (message.type === 'build_complete') {
         clientsThatNeedToUpdate.forEach((ws: WebSocket) => ws.send(MessageInterpreter.send({ type: 'do_update' })));
+        if (needToForceReload) {
+          needToForceReload = false;
+          clientsThatNeedToUpdate.forEach((ws: WebSocket) =>
+            ws.send(MessageInterpreter.send({ type: 'force_reload' })),
+          );
+        }
       }
     });
   });
@@ -40,4 +47,9 @@ const debounceSrc = debounce(function (path: string) {
 }, 100);
 chokidar.watch('src', { ignorePermissionErrors: true }).on('all', (_, path) => debounceSrc(path));
 
+/** CHECK:: manifest.js was updated **/
+chokidar.watch('manifest.js', { ignorePermissionErrors: true }).on('all', () => {
+  needToForceReload = true;
+});
+
 initReloadServer();

utils/reload/injections/script.ts

@@ -1,10 +1,13 @@
 import initReloadClient from '../initReloadClient';
 
 export default function addHmrIntoScript(watchPath: string) {
+  const reload = () => {
+    chrome.runtime.reload();
+  };
+
   initReloadClient({
     watchPath,
-    onUpdate: () => {
-      chrome.runtime.reload();
-    },
+    onUpdate: reload,
+    onForceReload: reload,
   });
 }

utils/reload/interpreter/types.ts

@@ -7,10 +7,12 @@ type UpdateRequestMessage = {
 };
 type UpdateCompleteMessage = { type: 'done_update' };
 type BuildCompletionMessage = { type: 'build_complete' };
+type ForceReloadMessage = { type: 'force_reload' };
 
 export type SerializedMessage = string;
 export type WebSocketMessage =
   | UpdateCompleteMessage
   | UpdateRequestMessage
   | UpdatePendingMessage
-  | BuildCompletionMessage;
+  | BuildCompletionMessage
+  | ForceReloadMessage;

vite.config.ts

@@ -5,7 +5,6 @@ import makeManifest from './utils/plugins/make-manifest';
 import customDynamicImport from './utils/plugins/custom-dynamic-import';
 import addHmr from './utils/plugins/add-hmr';
 import watchRebuild from './utils/plugins/watch-rebuild';
-import manifest from './manifest';
 
 const rootDir = resolve(__dirname);
 const srcDir = resolve(rootDir, 'src');
@@ -30,10 +29,10 @@ export default defineConfig({
     },
   },
   plugins: [
-    react(),
-    makeManifest(manifest, {
+    makeManifest({
       contentScriptCssKey: regenerateCacheInvalidationKey(),
     }),
+    react(),
     customDynamicImport(),
     addHmr({ background: enableHmrInBackgroundScript, view: true }),
     isDev && watchRebuild(),
@@ -46,7 +45,7 @@ export default defineConfig({
     minify: isProduction,
     modulePreload: false,
     reportCompressedSize: isProduction,
-    emptyOutDir: false,
+    emptyOutDir: !isDev,
     rollupOptions: {
       input: {
         devtools: resolve(pagesDir, 'devtools', 'index.html'),