Add background and content scripts

package.json

@@ -3,8 +3,13 @@
 	"version": "0.0.1",
 	"private": true,
 	"scripts": {
-		"dev": "vite dev",
-		"build": "vite build",
+		"dev": "pnpm build-dev && run-p run:chrome watch",
+		"build-dev": "vite build --mode development && pnpm replace-background-path && pnpm build-content-script",
+		"watch": "watch 'pnpm build-dev' src static",
+		"build": "vite build && pnpm replace-background-path && pnpm build-content-script",
+		"run:chrome": "web-ext run -t chromium -s build",
+		"replace-background-path": "cd build; sed -i \"\" \"s#\\$BACKGROUND_PATH#$(find app -wholename '*/immutable/background.*.js')#g\" manifest.json; cd -",
+		"build-content-script": "esbuild src/content.ts --bundle --minify --outdir=build",
 		"preview": "vite preview",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
@@ -27,6 +32,7 @@
 		"eslint-config-prettier": "^8.5.0",
 		"eslint-plugin-svelte": "^2.26.0",
 		"highlight.js": "^11.8.0",
+		"npm-run-all": "^4.1.5",
 		"postcss": "^8.4.23",
 		"prettier": "^2.8.0",
 		"prettier-plugin-svelte": "^2.8.1",
@@ -37,7 +43,8 @@
 		"tslib": "^2.4.1",
 		"typescript": "^5.0.0",
 		"vite": "^4.3.0",
-		"vitest": "^0.25.3"
+		"vitest": "^0.25.3",
+		"watch": "^1.0.2"
 	},
 	"type": "module"
 }

src/background.ts

@@ -0,0 +1 @@
+console.log('hello from background script')

src/content.ts

@@ -0,0 +1 @@
+console.log('hello from content script')

static/manifest.json

@@ -10,5 +10,15 @@
 		"default_popup": "index.html",
 		"default_icon": "favicon.png",
 		"default_title": "sveltekit-extension-template"
+	},
+	"background": {
+    "service_worker": "$BACKGROUND_PATH",
+    "type": "module"
+  },
+	"content_scripts": [
+    {
+      "matches": ["http://*/*", "https://*/*"],
+      "js": ["content.js"]
     }
+  ]
 }

vite.config.ts

@@ -1,9 +1,17 @@
 import { sveltekit } from '@sveltejs/kit/vite';
 import { defineConfig } from 'vitest/config';
+import { fileURLToPath } from 'url';
 
 export default defineConfig({
 	plugins: [sveltekit()],
 	test: {
 		include: ['src/**/*.{test,spec}.{js,ts}']
+	},
+	build: {
+    rollupOptions: {
+      input: {
+				background: fileURLToPath(new URL('./src/background.ts', import.meta.url)),
+      }
+    }
   }
 });