fix(build): fix hmr and add service worker

Author: dvcol

package.json

@@ -61,6 +61,7 @@
     "npm-run-all": "^4.1.5",
     "prettier": "^2.8.4",
     "rimraf": "^4.4.0",
+    "rollup": "^3.19.1",
     "standard-version": "^9.5.0",
     "stylelint": "^14.16.1",
     "typescript": "~4.9.5",

pnpm-lock.yaml

@@ -2,7 +2,7 @@ import fs from 'fs-extra';
 
 import pkg from '../package.json';
 
-import { isDev, port, r } from './utils';
+import { isDev, port, resolveParent } from './utils';
 
 import type { Manifest } from 'webextension-polyfill';
 
@@ -26,6 +26,9 @@ export const manifest: Manifest.WebExtensionManifest = {
     default_icon: 'icons/icon-512.png',
     default_popup: 'views/popup/index.html',
   },
+  background: {
+    service_worker: 'script/background.js',
+  },
   permissions: ['storage'],
   content_security_policy: {
     // Adds localhost for vite hot reload
@@ -35,26 +38,9 @@ export const manifest: Manifest.WebExtensionManifest = {
   },
 };
 
-/**
- * Manifest V2 version for hot reload
- * @see https://bugs.chromium.org/p/chromium/issues/detail?id=1247690
- * @todo Remove when MV3 hot reload is fixed
- */
-export const manifestV2: Manifest.WebExtensionManifest = {
-  manifest_version: 2,
-  name: manifest.name,
-  version: manifest.version,
-  description: manifest.description,
-  browser_action: manifest.action,
-  options_ui: manifest.options_ui,
-  icons: manifest.icons,
-  permissions: manifest.permissions,
-  content_security_policy: (manifest.content_security_policy as { extension_pages: string })?.extension_pages,
-};
-
 export async function writeManifest() {
-  fs.ensureDirSync(r(`dist`));
-  fs.writeJSONSync(r('dist/manifest.json'), isDev ? manifestV2 : manifest, {
+  fs.ensureDirSync(resolveParent(`dist`));
+  fs.writeJSONSync(resolveParent('dist/manifest.json'), manifest, {
     spaces: 2,
   });
   console.log(`Writing manifest.json to '${__dirname}/dist/manifest.json'`);

scripts/manifest.ts

@@ -1,20 +1,22 @@
+import { exec } from 'child_process';
+
 import { watch } from 'chokidar';
 import fs from 'fs-extra';
 
 import { writeManifest } from './manifest';
-import { isDev, port, r } from './utils';
+import { isDev, port, resolveParent } from './utils';
 
 /**
  * Replace index.html with link to vite localhost for hot reload
  * @param view the view to replace
  */
 const copyIndexHtml = async (view: string) => {
-  fs.ensureDirSync(r(`dist/views/${view}`));
+  fs.ensureDirSync(resolveParent(`dist/views/${view}`));
   const data = fs
-    .readFileSync(r(`src/views/${view}/index.html`), 'utf-8')
+    .readFileSync(resolveParent(`src/views/${view}/index.html`), 'utf-8')
     .replace('"./main.ts"', `"http://localhost:${port}/views/${view}/main.ts"`)
     .replace('<div id="app"></div>', '<div id="app">Vite server did not start</div>');
-  fs.writeFileSync(r(`dist/views/${view}/index.html`), data, 'utf-8');
+  fs.writeFileSync(resolveParent(`dist/views/${view}/index.html`), data, 'utf-8');
   console.log(`Stubbing '${view}' to '${__dirname}/dist/views/${view}/index.html'`);
 };
 
@@ -26,12 +28,13 @@ const copyViews = async (views = ['options', 'popup']) => views.map(copyIndexHtm
 /**
  * Copy extension icons to dist folder
  */
-const copyIcons = async () => (isDev ? fs.symlink(r('icons'), r('dist/icons'), 'junction') : fs.copySync('icons', 'dist/icons', { overwrite: true }));
+const copyIcons = async () =>
+  isDev ? fs.symlink(resolveParent('icons'), resolveParent('dist/icons'), 'junction') : fs.copySync('icons', 'dist/icons', { overwrite: true });
 
 /**
  * Copy extension icons to dist folder
  */
-const copyAssets = async () => fs.symlink(r('src/assets'), r('dist/assets'), 'junction');
+const copyAssets = async () => fs.symlink(resolveParent('src/assets'), resolveParent('dist/assets'), 'junction');
 
 /**
  * Prepare dist folder with manifest.json and views
@@ -45,15 +48,24 @@ const prepare = async (hmr = isDev) => {
     console.log('Watching changes ...');
 
     copyViews().catch(e => console.error('Failed to copy html', e));
-    watch(r('src/**/*.html')).on('change', () => {
+    watch(resolveParent('src/**/*.html')).on('change', () => {
       copyViews().catch(e => console.error('Failed to copy html', e));
     });
 
-    watch([r('src/manifest.ts'), r('package.json')]).on('change', () => {
+    watch([resolveParent('src/manifest.ts'), resolveParent('package.json')]).on('change', () => {
       writeManifest().catch(e => console.error('Failed to write manifest.json', e));
     });
 
-    copyAssets().catch(e => console.error('Failed to write manifest.json', e));
+    exec('vite build');
+    watch(resolveParent('src/script/**/*.ts')).on('change', () => {
+      try {
+        exec('vite build');
+      } catch (e) {
+        console.error('Failed to write manifest.json', e);
+      }
+    });
+
+    copyAssets().catch(e => console.error('Failed to write assets', e));
   }
 };
 

scripts/prepare.ts

@@ -7,4 +7,4 @@ export const enum environment {
 
 export const isDev = process.env.NODE_ENV === environment.dev;
 export const port = parseInt(process.env.PORT || '', 10) || 3303;
-export const r = (...args: string[]) => resolve(__dirname, '..', ...args);
+export const resolveParent = (...args: string[]) => resolve(__dirname, '..', ...args);

scripts/utils.ts

@@ -0,0 +1,3 @@
+export {};
+
+console.debug('Background script started');

src/script/background/index.ts

@@ -2,12 +2,26 @@ import { dirname, relative } from 'path';
 import { fileURLToPath, URL } from 'url';
 
 import vue from '@vitejs/plugin-vue';
+
 import { defineConfig } from 'vite';
 
-import { isDev, port, r } from './scripts/utils';
+import { isDev, port, resolveParent } from './scripts/utils';
+
+import type { InputOption } from 'rollup';
+
+const getInput = (hmr: boolean): InputOption =>
+  isDev
+    ? {
+        background: resolveParent('src/script/background/index.ts'),
+      }
+    : {
+        background: resolveParent('src/script/background/index.ts'),
+        options: resolveParent('src/views/options/index.html'),
+        popup: resolveParent('src/views/popup/index.html'),
+      };
 
 export default defineConfig(({ command }) => ({
-  root: r('src'),
+  root: resolveParent('src'),
   resolve: {
     alias: {
       '~': fileURLToPath(new URL('./src', import.meta.url)),
@@ -24,9 +38,7 @@ export default defineConfig(({ command }) => ({
       name: 'assets-rewrite',
       enforce: 'post',
       apply: 'build',
-      transformIndexHtml(html, { path }) {
-        return html.replace(/"\/assets\//g, `"${relative(dirname(path), '/assets').replace(/\\/g, '/')}/`);
-      },
+      transformIndexHtml: (html, { path }) => html.replace(/"\/assets\//g, `"${relative(dirname(path), '/assets').replace(/\\/g, '/')}/`),
     },
   ],
   base: command === 'serve' ? `http://localhost:${port}/` : '/',
@@ -37,12 +49,12 @@ export default defineConfig(({ command }) => ({
     },
   },
   build: {
-    outDir: r('dist'),
+    outDir: resolveParent('dist'),
     sourcemap: isDev ? 'inline' : false,
     rollupOptions: {
-      input: {
-        options: r('src/views/options/index.html'),
-        popup: r('src/views/popup/index.html'),
+      input: getInput(isDev),
+      output: {
+        entryFileNames: entry => (entry.name === 'background' ? 'script/[name].js' : 'assets/[name]-[hash].js'),
       },
     },
   },