diff --git a/package.json b/package.json
index cb10dd8..7d444a8 100644
--- a/package.json
+++ b/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"
 }
diff --git a/src/background.ts b/src/background.ts
new file mode 100644
index 0000000..9af21e4
--- /dev/null
+++ b/src/background.ts
@@ -0,0 +1 @@
+console.log('hello from background script')
\ No newline at end of file
diff --git a/src/content.ts b/src/content.ts
new file mode 100644
index 0000000..75259a3
--- /dev/null
+++ b/src/content.ts
@@ -0,0 +1 @@
+console.log('hello from content script')
\ No newline at end of file
diff --git a/static/manifest.json b/static/manifest.json
index 721db5f..6df1196 100644
--- a/static/manifest.json
+++ b/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"]
+    }
+  ]
 }
diff --git a/vite.config.ts b/vite.config.ts
index 37b6a84..6ffecb8 100644
--- a/vite.config.ts
+++ b/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)),
+      }
+    }
+  }
 });