antfu-collective · antfu · Aug 20, 2021 · Aug 20, 2021 · Aug 20, 2021 · Aug 20, 2021
diff --git a/package.json b/package.json
@@ -8,7 +8,7 @@
     "dev": "cross-env NODE_ENV=development run-p dev:*",
     "dev:prepare": "esno scripts/prepare.ts",
     "dev:web": "vite",
-    "dev:js": "npm run build:js -- --watch src",
+    "dev:js": "npm run build:js --watch src",
     "build": "cross-env NODE_ENV=production run-s clear build:web build:prepare build:js",
     "build:prepare": "esno scripts/prepare.ts",
     "build:web": "vite build",

diff --git a/scripts/prepare.ts b/scripts/prepare.ts
@@ -11,6 +11,7 @@ async function stubIndexHtml() {
   const views = [
     'options',
     'popup',
+    'background',
   ]
 
   for (const view of views) {

diff --git a/src/manifest.ts b/src/manifest.ts
@@ -22,7 +22,7 @@ export async function getManifest(): Promise<Manifest.WebExtensionManifest> {
       chrome_style: false,
     },
     background: {
-      scripts: ['./dist/background/index.global.js'],
+      page: './dist/background/index.html',
       persistent: false,
     },
     content_scripts: [

diff --git a/tsup.config.ts b/tsup.config.ts
@@ -3,8 +3,8 @@ import type { Options } from 'tsup'
 const isDev = process.env.NODE_ENV !== 'production'
 
 export const tsup: Options = {
-  entryPoints: ['src/background', 'src/content'],
-  outDir: 'extension/dist',
+  entryPoints: ['src/content'],
+  outDir: 'extension/dist/content',
   format: ['iife'],
   splitting: false,
   sourcemap: isDev ? 'inline' : false,

diff --git a/views/background/index.html b/views/background/index.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Background</title>
+</head>
+<body>
+  <script type="module" src="./main.ts"></script>
+</body>
+</html>
diff --git a/src/background/index.ts → views/background/main.ts b/src/background/index.ts → views/background/main.ts
@@ -1,6 +1,10 @@
 import { sendMessage, onMessage } from 'webext-bridge'
 import browser, { Tabs } from 'webextension-polyfill'
 
+if (import.meta.hot)
+  // @ts-expect-error for background HMR on dev
+  import('/@vite/client')
+
 browser.runtime.onInstalled.addListener((): void => {
   // eslint-disable-next-line no-console
   console.log('Extension installed')

diff --git a/vite.config.ts b/vite.config.ts
@@ -35,8 +35,9 @@ export default defineConfig(({ command }) => {
       },
       rollupOptions: {
         input: {
-          popup: r('views/popup/index.html'),
+          background: r('views/background/index.html'),
           options: r('views/options/index.html'),
+          popup: r('views/popup/index.html'),
         },
       },
     },