@shoplflow/extension 0.0.2

package/utils/plugins/watch-rebuild.ts

@@ -0,0 +1,16 @@
+import type { PluginOption } from 'vite';
+import { resolve } from 'path';
+
+const rootDir = resolve(__dirname, '..', '..');
+const manifestFile = resolve(rootDir, 'manifest.ts');
+const viteConfigFile = resolve(rootDir, 'vite.config.ts');
+
+export default function watchRebuild(): PluginOption {
+  return {
+    name: 'watch-rebuild',
+    buildStart() {
+      this.addWatchFile(manifestFile);
+      this.addWatchFile(viteConfigFile);
+    },
+  };
+}

package/utils/reload/constant.ts

@@ -0,0 +1,5 @@
+export const LOCAL_RELOAD_SOCKET_PORT = 8081;
+export const LOCAL_RELOAD_SOCKET_URL = `ws://localhost:${LOCAL_RELOAD_SOCKET_PORT}`;
+export const UPDATE_PENDING_MESSAGE = 'wait_update';
+export const UPDATE_REQUEST_MESSAGE = 'do_update';
+export const UPDATE_COMPLETE_MESSAGE = 'done_update';

package/utils/reload/initReloadClient.ts

@@ -0,0 +1,52 @@
+import {
+  LOCAL_RELOAD_SOCKET_URL,
+  UPDATE_COMPLETE_MESSAGE,
+  UPDATE_PENDING_MESSAGE,
+  UPDATE_REQUEST_MESSAGE,
+} from './constant';
+import MessageInterpreter from './interpreter';
+
+let needToUpdate = false;
+
+export default function initReloadClient({
+  watchPath,
+  onUpdate,
+}: {
+  watchPath: string;
+  onUpdate: () => void;
+}): WebSocket {
+  const socket = new WebSocket(LOCAL_RELOAD_SOCKET_URL);
+
+  function sendUpdateCompleteMessage() {
+    socket.send(MessageInterpreter.send({ type: UPDATE_COMPLETE_MESSAGE }));
+  }
+
+  socket.addEventListener('message', event => {
+    const message = MessageInterpreter.receive(String(event.data));
+
+    switch (message.type) {
+      case UPDATE_REQUEST_MESSAGE: {
+        if (needToUpdate) {
+          sendUpdateCompleteMessage();
+          needToUpdate = false;
+          onUpdate();
+        }
+        return;
+      }
+      case UPDATE_PENDING_MESSAGE: {
+        if (!needToUpdate) {
+          needToUpdate = message.path.includes(watchPath);
+        }
+        return;
+      }
+    }
+  });
+
+  socket.onclose = () => {
+    console.warn(
+      `Reload server disconnected.\nPlease check if the WebSocket server is running properly on ${LOCAL_RELOAD_SOCKET_URL}. This feature detects changes in the code and helps the browser to reload the extension or refresh the current tab.`,
+    );
+  };
+
+  return socket;
+}

package/utils/reload/initReloadServer.js

@@ -0,0 +1,72 @@
+import { WebSocketServer } from 'ws';
+import chokidar from 'chokidar';
+import { clearTimeout } from 'timers';
+
+function debounce(callback, delay) {
+    let timer;
+    return function (...args) {
+        clearTimeout(timer);
+        timer = setTimeout(() => callback(...args), delay);
+    };
+}
+
+const LOCAL_RELOAD_SOCKET_PORT = 8081;
+const LOCAL_RELOAD_SOCKET_URL = `ws://localhost:${LOCAL_RELOAD_SOCKET_PORT}`;
+const UPDATE_PENDING_MESSAGE = 'wait_update';
+const UPDATE_REQUEST_MESSAGE = 'do_update';
+const UPDATE_COMPLETE_MESSAGE = '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);
+    }
+}
+
+const clientsThatNeedToUpdate = new Set();
+function initReloadServer() {
+    const wss = new WebSocketServer({ port: LOCAL_RELOAD_SOCKET_PORT });
+    wss.on('listening', () => console.log(`[HRS] Server listening at ${LOCAL_RELOAD_SOCKET_URL}`));
+    wss.on('connection', ws => {
+        clientsThatNeedToUpdate.add(ws);
+        ws.addEventListener('close', () => clientsThatNeedToUpdate.delete(ws));
+        ws.addEventListener('message', event => {
+            const message = MessageInterpreter.receive(String(event.data));
+            if (message.type === UPDATE_COMPLETE_MESSAGE) {
+                ws.close();
+            }
+        });
+    });
+}
+/** CHECK:: src file was updated **/
+const debounceSrc = debounce(function (path) {
+    // Normalize path on Windows
+    const pathConverted = path.replace(/\\/g, '/');
+    clientsThatNeedToUpdate.forEach((ws) => ws.send(MessageInterpreter.send({
+        type: UPDATE_PENDING_MESSAGE,
+        path: pathConverted,
+    })));
+    // Delay waiting for public assets to be copied
+}, 400);
+chokidar.watch('src').on('all', (event, path) => debounceSrc(path));
+/** CHECK:: build was completed **/
+const debounceDist = debounce(() => {
+    clientsThatNeedToUpdate.forEach((ws) => {
+        ws.send(MessageInterpreter.send({ type: UPDATE_REQUEST_MESSAGE }));
+    });
+}, 100);
+chokidar.watch('dist').on('all', event => {
+    // Ignore unlink, unlinkDir and change events
+    // that happen in beginning of build:watch and
+    // that will cause ws.send() if it takes more than 400ms
+    // to build (which it might). This fixes:
+    // https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite/issues/100
+    if (event !== 'add' && event !== 'addDir')
+        return;
+    debounceDist();
+});
+initReloadServer();

package/utils/reload/initReloadServer.ts

@@ -0,0 +1,68 @@
+import type { WebSocket } from 'ws';
+import { WebSocketServer } from 'ws';
+import chokidar from 'chokidar';
+import { debounce } from './utils';
+import {
+  LOCAL_RELOAD_SOCKET_PORT,
+  LOCAL_RELOAD_SOCKET_URL,
+  UPDATE_COMPLETE_MESSAGE,
+  UPDATE_PENDING_MESSAGE,
+  UPDATE_REQUEST_MESSAGE,
+} from './constant';
+import MessageInterpreter from './interpreter';
+
+const clientsThatNeedToUpdate: Set<WebSocket> = new Set();
+
+function initReloadServer() {
+  const wss = new WebSocketServer({ port: LOCAL_RELOAD_SOCKET_PORT });
+
+  wss.on('listening', () => console.info(`[HRS] Server listening at ${LOCAL_RELOAD_SOCKET_URL}`));
+
+  wss.on('connection', (ws) => {
+    clientsThatNeedToUpdate.add(ws);
+
+    ws.addEventListener('close', () => clientsThatNeedToUpdate.delete(ws));
+    ws.addEventListener('message', (event) => {
+      const message = MessageInterpreter.receive(String(event.data));
+      if (message.type === UPDATE_COMPLETE_MESSAGE) {
+        ws.close();
+      }
+    });
+  });
+}
+
+/** CHECK:: src file was updated **/
+const debounceSrc = debounce(function (path: string) {
+  // Normalize path on Windows
+  const pathConverted = path.replace(/\\/g, '/');
+  clientsThatNeedToUpdate.forEach((ws: WebSocket) =>
+    ws.send(
+      MessageInterpreter.send({
+        type: UPDATE_PENDING_MESSAGE,
+        path: pathConverted,
+      }),
+    ),
+  );
+  // Delay waiting for public assets to be copied
+}, 400);
+chokidar.watch('src').on('all', (event, path) => debounceSrc(path));
+
+/** CHECK:: build was completed **/
+const debounceDist = debounce(() => {
+  clientsThatNeedToUpdate.forEach((ws: WebSocket) => {
+    ws.send(MessageInterpreter.send({ type: UPDATE_REQUEST_MESSAGE }));
+  });
+}, 100);
+chokidar.watch('dist').on('all', (event) => {
+  // Ignore unlink, unlinkDir and change events
+  // that happen in beginning of build:watch and
+  // that will cause ws.send() if it takes more than 400ms
+  // to build (which it might). This fixes:
+  // https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite/issues/100
+  if (event !== 'add' && event !== 'addDir') {
+    return;
+  }
+  debounceDist();
+});
+
+initReloadServer();

package/utils/reload/injections/script.js

@@ -0,0 +1,60 @@
+const LOCAL_RELOAD_SOCKET_PORT = 8081;
+const LOCAL_RELOAD_SOCKET_URL = `ws://localhost:${LOCAL_RELOAD_SOCKET_PORT}`;
+const UPDATE_PENDING_MESSAGE = 'wait_update';
+const UPDATE_REQUEST_MESSAGE = 'do_update';
+const UPDATE_COMPLETE_MESSAGE = '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);
+    }
+}
+
+let needToUpdate = false;
+function initReloadClient({ watchPath, onUpdate, }) {
+    const socket = new WebSocket(LOCAL_RELOAD_SOCKET_URL);
+    function sendUpdateCompleteMessage() {
+        socket.send(MessageInterpreter.send({ type: UPDATE_COMPLETE_MESSAGE }));
+    }
+    socket.addEventListener('message', event => {
+        const message = MessageInterpreter.receive(String(event.data));
+        switch (message.type) {
+            case UPDATE_REQUEST_MESSAGE: {
+                if (needToUpdate) {
+                    sendUpdateCompleteMessage();
+                    needToUpdate = false;
+                    onUpdate();
+                }
+                return;
+            }
+            case UPDATE_PENDING_MESSAGE: {
+                if (!needToUpdate) {
+                    needToUpdate = message.path.includes(watchPath);
+                }
+                return;
+            }
+        }
+    });
+    socket.onclose = () => {
+        console.warn(`Reload server disconnected.\nPlease check if the WebSocket server is running properly on ${LOCAL_RELOAD_SOCKET_URL}. This feature detects changes in the code and helps the browser to reload the extension or refresh the current tab.`);
+    };
+    return socket;
+}
+
+function addHmrIntoScript(watchPath) {
+    initReloadClient({
+        watchPath,
+        onUpdate: () => {
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            chrome.runtime.reload();
+        },
+    });
+}
+
+export { addHmrIntoScript as default };

package/utils/reload/injections/script.ts

@@ -0,0 +1,12 @@
+import initReloadClient from '../initReloadClient';
+
+export default function addHmrIntoScript(watchPath: string) {
+  initReloadClient({
+    watchPath,
+    onUpdate: () => {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      chrome.runtime.reload();
+    },
+  });
+}

package/utils/reload/injections/view.js

@@ -0,0 +1,74 @@
+const LOCAL_RELOAD_SOCKET_PORT = 8081;
+const LOCAL_RELOAD_SOCKET_URL = `ws://localhost:${LOCAL_RELOAD_SOCKET_PORT}`;
+const UPDATE_PENDING_MESSAGE = 'wait_update';
+const UPDATE_REQUEST_MESSAGE = 'do_update';
+const UPDATE_COMPLETE_MESSAGE = '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);
+    }
+}
+
+let needToUpdate = false;
+function initReloadClient({ watchPath, onUpdate, }) {
+    const socket = new WebSocket(LOCAL_RELOAD_SOCKET_URL);
+    function sendUpdateCompleteMessage() {
+        socket.send(MessageInterpreter.send({ type: UPDATE_COMPLETE_MESSAGE }));
+    }
+    socket.addEventListener('message', event => {
+        const message = MessageInterpreter.receive(String(event.data));
+        switch (message.type) {
+            case UPDATE_REQUEST_MESSAGE: {
+                if (needToUpdate) {
+                    sendUpdateCompleteMessage();
+                    needToUpdate = false;
+                    onUpdate();
+                }
+                return;
+            }
+            case UPDATE_PENDING_MESSAGE: {
+                if (!needToUpdate) {
+                    needToUpdate = message.path.includes(watchPath);
+                }
+                return;
+            }
+        }
+    });
+    socket.onclose = () => {
+        console.warn(`Reload server disconnected.\nPlease check if the WebSocket server is running properly on ${LOCAL_RELOAD_SOCKET_URL}. This feature detects changes in the code and helps the browser to reload the extension or refresh the current tab.`);
+    };
+    return socket;
+}
+
+function addHmrIntoView(watchPath) {
+    let pendingReload = false;
+    initReloadClient({
+        watchPath,
+        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);
+}
+
+export { addHmrIntoView as default };

package/utils/reload/injections/view.ts

@@ -0,0 +1,29 @@
+import initReloadClient from '../initReloadClient';
+
+export default function addHmrIntoView(watchPath: string) {
+  let pendingReload = false;
+  // reload
+  function reload(): void {
+    pendingReload = false;
+    window.location.reload();
+  }
+
+  // reload when tab is visible
+  function reloadWhenTabIsVisible(): void {
+    !document.hidden && pendingReload && reload();
+  }
+
+  initReloadClient({
+    watchPath,
+    onUpdate: () => {
+      // disable reload when tab is hidden
+      if (document.hidden) {
+        pendingReload = true;
+        return;
+      }
+      reload();
+    },
+  });
+
+  document.addEventListener('visibilitychange', reloadWhenTabIsVisible);
+}

package/utils/reload/interpreter/index.ts

@@ -0,0 +1,13 @@
+import type { ReloadMessage, SerializedMessage } from './types';
+
+export default class MessageInterpreter {
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  private constructor() {}
+
+  static send(message: ReloadMessage): SerializedMessage {
+    return JSON.stringify(message);
+  }
+  static receive(serializedMessage: SerializedMessage): ReloadMessage {
+    return JSON.parse(serializedMessage) as ReloadMessage;
+  }
+}

package/utils/reload/interpreter/types.ts

@@ -0,0 +1,15 @@
+import { UPDATE_COMPLETE_MESSAGE, UPDATE_PENDING_MESSAGE, UPDATE_REQUEST_MESSAGE } from '../constant';
+
+type UpdatePendingMessage = {
+  type: typeof UPDATE_PENDING_MESSAGE;
+  path: string;
+};
+
+type UpdateRequestMessage = {
+  type: typeof UPDATE_REQUEST_MESSAGE;
+};
+
+type UpdateCompleteMessage = { type: typeof UPDATE_COMPLETE_MESSAGE };
+
+export type SerializedMessage = string;
+export type ReloadMessage = UpdateCompleteMessage | UpdateRequestMessage | UpdatePendingMessage;

package/utils/reload/rollup.config.ts

@@ -0,0 +1,28 @@
+import typescript from '@rollup/plugin-typescript';
+
+const plugins = [typescript()];
+
+export default [
+  {
+    plugins,
+    input: 'utils/reload/initReloadServer.ts',
+    output: {
+      file: 'utils/reload/initReloadServer.js',
+    },
+    external: ['ws', 'chokidar', 'timers'],
+  },
+  {
+    plugins,
+    input: 'utils/reload/injections/script.ts',
+    output: {
+      file: 'utils/reload/injections/script.js',
+    },
+  },
+  {
+    plugins,
+    input: 'utils/reload/injections/view.ts',
+    output: {
+      file: 'utils/reload/injections/view.js',
+    },
+  },
+];

package/utils/reload/utils.ts

@@ -0,0 +1,9 @@
+import { clearTimeout } from 'timers';
+
+export function debounce<A extends unknown[]>(callback: (...args: A) => void, delay: number) {
+  let timer: NodeJS.Timeout;
+  return function (...args: A) {
+    clearTimeout(timer);
+    timer = setTimeout(() => callback(...args), delay);
+  };
+}

package/vite.config.ts

@@ -0,0 +1,89 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import path, { resolve } from 'path';
+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');
+const pagesDir = resolve(srcDir, 'pages');
+const assetsDir = resolve(srcDir, 'assets');
+const outDir = resolve(rootDir, 'dist');
+const publicDir = resolve(rootDir, 'public');
+
+const isDev = process.env.__DEV__ === 'true';
+const isProduction = !isDev;
+
+function generateKey(): string {
+  return `${(Date.now() / 100).toFixed()}`;
+}
+
+function firstUpperCase(str: string) {
+  const firstAlphabet = new RegExp(/( |^)[a-z]/, 'g');
+  return str.toLowerCase().replace(firstAlphabet, (L) => L.toUpperCase());
+}
+
+let cacheInvalidationKey: string = generateKey();
+function regenerateCacheInvalidationKey() {
+  cacheInvalidationKey = generateKey();
+  return cacheInvalidationKey;
+}
+
+// ENABLE HMR IN BACKGROUND SCRIPT
+const enableHmrInBackgroundScript = true;
+
+export default defineConfig({
+  resolve: {
+    alias: {
+      '@root': rootDir,
+      '@src': srcDir,
+      '@assets': assetsDir,
+      '@pages': pagesDir,
+    },
+  },
+  plugins: [
+    react(),
+    makeManifest(manifest, {
+      isDev,
+      contentScriptCssKey: regenerateCacheInvalidationKey(),
+    }),
+    customDynamicImport(),
+    addHmr({ background: enableHmrInBackgroundScript, view: true }),
+    watchRebuild(),
+  ],
+  publicDir,
+  build: {
+    outDir,
+    /** Can slowDown build speed. */
+    // sourcemap: isDev,
+    minify: isProduction,
+    modulePreload: false,
+    reportCompressedSize: isProduction,
+    rollupOptions: {
+      input: {
+        // devtools: resolve(pagesDir, 'devtools', 'index.html'),
+        content: resolve(pagesDir, 'content', 'index.ts'),
+        background: resolve(pagesDir, 'background', 'index.ts'),
+        contentStyle: resolve(pagesDir, 'content', 'style.scss'),
+        popup: resolve(pagesDir, 'popup', 'index.html'),
+        options: resolve(pagesDir, 'options', 'index.html'),
+      },
+      output: {
+        entryFileNames: 'src/pages/[name]/index.js',
+        chunkFileNames: isDev ? 'assets/js/[name].js' : 'assets/js/[name].[hash].js',
+        assetFileNames: (assetInfo) => {
+          const { dir, name: _name } = path.parse(assetInfo.name);
+          const assetFolder = dir.split('/').at(-1);
+          const name = assetFolder + firstUpperCase(_name);
+          if (name === 'contentStyle') {
+            return `assets/css/contentStyle${cacheInvalidationKey}.chunk.css`;
+          }
+          return `assets/[ext]/${name}.chunk.[ext]`;
+        },
+      },
+    },
+  },
+});