example webext-bridge

package.json

@@ -5,7 +5,7 @@
   "scripts": {
     "start": "vite",
     "dev": "vite",
-    "build": "vite build && web-ext build --overwrite-dest -s ./build/dist -a ./build/ && cp ./build/*.zip /mnt/e/extensions/",
+    "build": "vite build && web-ext build --overwrite-dest -s ./build/dist -a ./build/ && cp -f ./build/*.zip /mnt/e/extensions/",
     "sign": "web-ext sign --api-key $(grep WEB_EXT_API_KEY .env | cut -d '=' -f2) --api-secret $(grep WEB_EXT_API_SECRET .env | cut -d '=' -f2) -s ./build/dist -a ./build/",
     "serve": "vite preview"
   },

src/background/background.ts

@@ -1,3 +1,10 @@
 /**
  * The background script for the extension is responsible for sending requests to the servers using fetch.
- */
+ */
+// Inside background script
+import { onMessage } from 'webext-bridge'  
+
+onMessage('test', ({ data: { a, b } }) => {
+    console.log(a, b);
+    return { result: true };
+});

src/scripts/youtube.ts

@@ -1,3 +1,7 @@
 /**
  * Responsible for parsing youtube for specific data, e.g. urls, tags, comments, etc.
  */
+
+import { sendMessage } from 'webext-bridge';
+
+sendMessage("test", { a: "speed", b: 2 }).then(console.log);

src/shim.d.ts

@@ -0,0 +1,7 @@
+import { ProtocolWithReturn } from 'webext-bridge'
+
+declare module 'webext-bridge' {
+  export interface ProtocolMap {
+    test: ProtocolWithReturn<{ a: string, b: number }, { result: boolean }>
+  }
+}

vite.config.ts

@@ -17,6 +17,7 @@ export default defineConfig({
     }),
   ],
   build: {
+    minify: 'terser',
     outDir: path.resolve(__dirname, "build/dist"),
     target: 'esnext',
     polyfillDynamicImport: false,