update core template

react-app/.gitignore

@@ -14,5 +14,5 @@ dist-ssr
 .idea
 
 # compiled
-utils/core/hmr-core/**/*.js
+utils/core/**/*.js
 public/manifest.json

react-app/manifest.ts → react-app/manifest.js

@@ -1,9 +1,9 @@
-import packageJson from '../package.json';
+import packageJson from '../package.json' assert { type: 'json' };
 
 /**
  * After changing, please reload the extension at `chrome://extensions`
  */
-const manifest: chrome.runtime.ManifestV3 = {
+const manifest = {
   manifest_version: 3,
   name: packageJson.name,
   version: packageJson.version,
@@ -21,7 +21,7 @@ const manifest: chrome.runtime.ManifestV3 = {
     default_icon: 'icon-34.png',
   },
   icons: {
-    '128': 'icon-128.png',
+    128: 'icon-128.png',
   },
   content_scripts: [
     {
@@ -31,7 +31,7 @@ const manifest: chrome.runtime.ManifestV3 = {
   ],
   web_accessible_resources: [
     {
-      resources: ['assets/js/*.js', 'assets/svg/*.svg', 'icon-128.png', 'icon-34.png'],
+      resources: ['assets/js/*.js', 'assets/css/*.css', 'assets/svg/*.svg', 'icon-128.png', 'icon-34.png'],
       matches: ['*://*/*'],
     },
   ],

react-app/package.json

@@ -6,8 +6,8 @@
     "build:firefox": "tsc --noEmit && cross-env __FIREFOX__=true vite build",
     "build:watch": "cross-env __DEV__=true vite build -w --mode development",
     "build:firefox:watch": "cross-env __DEV__=true __FIREFOX__=true vite build -w --mode development",
-    "build:hmr": "rollup --config utils/core/hmr-core/reload/rollup.config.mjs",
-    "wss": "node utils/core/hmr-core/reload/initReloadServer.js",
+    "build:hmr": "rollup --config utils/core/reload/rollup.config.mjs",
+    "wss": "node utils/core/reload/initReloadServer.js",
     "dev": "npm run build:hmr && (run-p wss build:watch)",
     "dev:firefox": "npm run build:hmr && (run-p wss build:firefox:watch)",
     "lint": "eslint src --ext .ts",
@@ -45,7 +45,7 @@
     "@types/ws": "8.5.7",
     "@typescript-eslint/eslint-plugin": "6.7.5",
     "@typescript-eslint/parser": "6.7.5",
-    "@vitejs/plugin-react": "4.1.0",
+    "@vitejs/plugin-react": "4.2.0",
     "chokidar": "3.5.3",
     "cross-env": "7.0.3",
     "eslint": "8.51.0",
@@ -59,10 +59,10 @@
     "fs-extra": "11.1.1",
     "npm-run-all": "4.1.5",
     "prettier": "3.0.3",
-    "rollup": "4.2.0",
+    "rollup": "4.3.0",
     "ts-loader": "9.5.0",
     "typescript": "5.2.2",
-    "vite": "4.4.11",
+    "vite": "5.0.2",
     "ws": "8.14.2"
   }
 }

react-app/src/pages/popup/Popup.tsx

@@ -14,8 +14,8 @@ import urls from '@utils/endpoints/urls';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { createHashRouter } from 'react-router-dom';
-import '../internationalization';
 import { toast } from 'react-toastify';
+import '../internationalization';
 
 const hashRouting = createHashRouter([
   {
@@ -39,6 +39,7 @@ const hashRouting = createHashRouter([
     element: <AuthPage />,
   },
 ]);
+
 const Popup = () => {
   const { isDarkMode } = useTernaryDarkMode();
 

react-app/utils/core/hmr-core/log.ts → react-app/utils/core/log.ts

@@ -1,5 +1,5 @@
 type ColorType = 'success' | 'info' | 'error' | 'warning' | keyof typeof COLORS;
-export type ValueOf<T> = T[keyof T];
+type ValueOf<T> = T[keyof T];
 
 export default function colorLog(message: string, type?: ColorType) {
   let color: ValueOf<typeof COLORS>;

react-app/utils/core/plugins/custom-dynamic-import.ts

@@ -0,0 +1,19 @@
+import type { PluginOption } from 'vite';
+
+export default function customDynamicImport(): PluginOption {
+  return {
+    name: 'custom-dynamic-import',
+    renderDynamicImport({ moduleId }) {
+      if (!moduleId.includes('node_modules') && process.env.__FIREFOX__) {
+        return {
+          left: `import(browser.runtime.getURL('./') + `,
+          right: ".split('../').join(''));",
+        };
+      }
+      return {
+        left: 'import(',
+        right: ')',
+      };
+    },
+  };
+}

react-app/utils/core/plugins/make-manifest.ts

@@ -0,0 +1,49 @@
+import * as fs from 'fs';
+import * as path from 'path';
+import * as process from 'process';
+import url from 'url';
+import type { PluginOption } from 'vite';
+import colorLog from '../log';
+import ManifestParser from '../manifest-parser';
+
+const { resolve } = path;
+
+const rootDir = resolve(__dirname, '../../..');
+const distDir = resolve(rootDir, 'dist');
+const manifestFile = resolve(rootDir, 'manifest.js');
+
+const getManifestWithCacheBurst = (): Promise<{ default: chrome.runtime.ManifestV3 }> => {
+  const withCacheBurst = (path: string) => `${path}?${Date.now().toString()}`;
+  /**
+   * In Windows, import() doesn't work without file:// protocol.
+   * So, we need to convert path to file:// protocol. (url.pathToFileURL)
+   */
+  if (process.platform === 'win32') {
+    return import(withCacheBurst(url.pathToFileURL(manifestFile).href));
+  }
+  return import(withCacheBurst(manifestFile));
+};
+
+export default function makeManifest(): PluginOption {
+  function makeManifest(manifest: chrome.runtime.ManifestV3, to: string) {
+    if (!fs.existsSync(to)) {
+      fs.mkdirSync(to);
+    }
+    const manifestPath = resolve(to, 'manifest.json');
+
+    fs.writeFileSync(manifestPath, ManifestParser.convertManifestToString(manifest));
+
+    colorLog(`Manifest file copy complete: ${manifestPath}`, 'success');
+  }
+
+  return {
+    name: 'make-manifest',
+    buildStart() {
+      this.addWatchFile(manifestFile);
+    },
+    async writeBundle() {
+      const manifest = await getManifestWithCacheBurst();
+      makeManifest(manifest.default, distDir);
+    },
+  };
+}

react-app/utils/core/plugins/watch-rebuild.ts

@@ -0,0 +1,18 @@
+import type { PluginOption } from 'vite';
+import { WebSocket } from 'ws';
+import { LOCAL_RELOAD_SOCKET_URL } from '../reload/constant';
+import MessageInterpreter from '../reload/interpreter';
+
+export default function watchRebuild(): PluginOption {
+  const ws = new WebSocket(LOCAL_RELOAD_SOCKET_URL);
+  return {
+    name: 'watch-rebuild',
+    writeBundle() {
+      /**
+       * When the build is complete, send a message to the reload server.
+       * The reload server will send a message to the client to reload or refresh the extension.
+       */
+      ws.send(MessageInterpreter.send({ type: 'build_complete' }));
+    },
+  };
+}

react-app/utils/core/reload/constant.ts

@@ -0,0 +1,2 @@
+export const LOCAL_RELOAD_SOCKET_PORT = 8081;
+export const LOCAL_RELOAD_SOCKET_URL = `ws://localhost:${LOCAL_RELOAD_SOCKET_PORT}`;