port to mv3

v2/Makefile

@@ -28,7 +28,7 @@ background/node_modules:
 	cd background && npm install
 
 background: .FORCE background/node_modules
-	cd background && tsc --project src/tsconfig.json
+	cd background && npm run build
 
 ui/node_modules:
 	git submodule init && git submodule update

v2/background/package.json

@@ -1,18 +1,19 @@
 {
     "name": "background",
     "scripts": {
-        "build": "tsc --project src/tsconfig.json",
+        "build": "webpack",
         "test": "tsc --project spec/tsconfig.json && jasmine"
     },
     "private": true,
-    "dependencies": {
-        "puppeteer": "^5.5.0",
-        "typescript": "^4.1.3"
-    },
     "devDependencies": {
-        "@types/chrome": "0.0.127",
+        "@types/chrome": "0.0.183",
         "@types/jasmine": "^3.6.2",
         "@types/puppeteer": "^5.4.2",
-        "jasmine": "^3.6.3"
+        "jasmine": "^4.1.0",
+        "puppeteer": "^5.5.0",
+        "ts-loader": "^9.2.9",
+        "typescript": "^4.1.3",
+        "webpack": "^5.72.0",
+        "webpack-cli": "^4.9.2"
     }
 }

v2/background/src/background.ts

@@ -2,49 +2,70 @@ import { Debuggee } from "./debuggee";
 import { Interception } from "./interception";
 import { Intercepted } from "./request";
 
-chrome.browserAction.onClicked.addListener(async (tab: chrome.tabs.Tab) => {
+const openAsync = (config: object): Promise<chrome.windows.Window | undefined> => {
+  return new Promise((resolve, reject) => {
+    chrome.windows.create(config, (window) => {
+      if (chrome.runtime.lastError) {
+        reject(chrome.runtime.lastError.message);
+      }
+      resolve(window);
+    })
+  })
+}
+
+chrome.action.onClicked.addListener(async (tab: chrome.tabs.Tab) => {
   let dbg: Debuggee = new Debuggee(tab);
   try {
     await dbg.attach();
   } catch(e) {
-    console.error(e);
-    alert('Failed to attach to ' + tab.url + ' - probably because of enterprise policies.');
+    console.error(e, JSON.stringify(e));
+    // alert is not supported
+    // alert('Failed to attach to ' + tab.url + ' - probably because of enterprise policies.');
     return;
   }
-  let int: Interception = Interception.build(dbg);
-  const popup = open('/ui/dist/ui/index.html', `tamperchrome_${tab.id}`, 'menubar=0,innerWidth=900,innerHeight=800');
+  const int: Interception = Interception.build(dbg);
+
+  const popup = await openAsync({
+    url: '/ui/dist/ui/index.html',
+    type: 'popup',
+    width: 900,
+    height: 800,
+  });
+
   if (!popup) {
     throw new Error('Failed to open UI window');
   }
-  popup.onmessage = async e => {
-    if (e.data.event == 'capture') {
-      await int.capture(e.data.pattern || '*');
-      await int.onRequest(async (req: Intercepted) => {
-        const mc = new MessageChannel;
-        popup.postMessage({'event': 'onRequest', request: JSON.parse(JSON.stringify(req))}, origin, [mc.port1]);
-        mc.port2.onmessage = async (e) => {
-          await req.continueRequest(e.data.request);
-        };
-      });
-      await int.onResponse(async (res: Intercepted) => {
-        const mc = new MessageChannel;
-        const bodyMc = new MessageChannel;
-        popup.postMessage({'event': 'onResponse', response: JSON.parse(JSON.stringify(res))}, origin, [mc.port1, bodyMc.port1]);
-        mc.port2.onmessage = async (e) => {
-          await res.continueResponse(e.data.response);
-        };
-        bodyMc.port2.onmessage = async (e) => {
-          bodyMc.port2.postMessage(await res.getResponseBody());
-        };
-      });
-    } else if (e.data.event == 'reloadTab') {
-      chrome.tabs.reload(tab.id!, {bypassCache: true});
-    }
-  };
-  popup.onload = () => popup.onunload = () => {
-    dbg.detach();
-    popup.close();
-  }
+
+  chrome.runtime.onConnect.addListener(port => {
+    if (port.name !== 'tamperchrome') return
+    port.onMessage.addListener(async (msg) => {
+      if (msg.name === "capture") {
+        await int.capture(msg.data.pattern || '*');
+        await int.onRequest(async (req: Intercepted) => {
+          port.postMessage({ name: 'onRequest', data: { request: req } });
+          port.onMessage.addListener(async (msg) => {
+            if (msg.name === req.id) await req.continueRequest(msg.request);
+          })
+        });
+        await int.onResponse(async (res: Intercepted) => {
+          port.postMessage({ name: 'onResponse', data: { response: res } });
+          port.onMessage.addListener(async (msg) => {
+            if (msg.name === res.id + '-res') await res.continueResponse(msg.response);
+          })
+          port.onMessage.addListener(async (msg) => {
+            if (msg.name === res.id + '-body') {
+              const data = await res.getResponseBody()
+              port.postMessage({ name: res.id + '-body', data })
+            }
+          })
+        });
+      } else if (msg.name === "reloadTab") {
+        chrome.tabs.reload(tab.id!, { bypassCache: true });
+      }
+    });
+    port.onDisconnect.addListener(() => dbg.detach())
+  });
+
   await dbg.waitForDetach();
-  popup.close();
+  await chrome.windows.remove(popup.id!);
 });

v2/background/tsconfig.json

@@ -0,0 +1,8 @@
+{
+	"compilerOptions": {
+		"strict": true,
+		"sourceMap": true,
+		"target": "ES2018",
+		"alwaysStrict": true
+	}
+}

v2/background/webpack.config.js

@@ -0,0 +1,20 @@
+const path = require('path');
+
+module.exports = {
+  entry: './src/background.ts',
+  output: {
+    filename: 'background.js',
+    path: path.resolve(__dirname, 'out'),
+  },
+  resolve: {
+    extensions: [".ts"],
+  },
+  module: {
+    rules: [
+      { 
+        test: /\.ts$/,
+        loader: "ts-loader"
+      }
+    ]
+  }
+};

v2/manifest_base.json

@@ -1,16 +1,15 @@
 {
-  "manifest_version": 2,
+  "manifest_version": 3,
   "name": "Tamper Dev",
   "version": "2",
   "description" : "Intercept and edit HTTP/HTTPS requests and responses as they happen without the need of a proxy.",
   "icons": {"16": "icons/white.png","48": "icons/96x96.png","128": "icons/256x256.png"},
-  "browser_action": {
+  "action": {
     "default_title": "Tamper Dev",
     "default_icon": {"16": "icons/white.png","48": "icons/white.png","128": "icons/256x256.png"}
   },
   "background": {
-    "page": "background/background.html",
-    "persistent": true
+    "service_worker": "background/out/background.js"
   },
   "commands": {
     "_execute_browser_action": {
@@ -22,6 +21,9 @@
   },
   "minimum_chrome_version": "87",
   "permissions": ["debugger", "activeTab"],
-  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
+  "content_security_policy": {
+    "script-src": "self unsafe-eval",
+    "object-src": "self"
+  },
   "key": "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAgXuoF2D68sbW53PO/5gK6ar52c/oANFtGFuxE1SdKKLDdF4RbDZefwK48Bc4Zc2pW81qmHC+H+gMHLh+oiH0TP2l0THjQRRf57f5Wuhk42Tdp0qlyS2qQMky5WOVZU8vQdhnRCktMPLyNWx2PeiUXkQDQ3XkcY0cttPhRAlZgx+qNfguHkmsC7HNZ/Y00TY5uUrlGl9MDt2d6fj1uUyV7pimLMA4cnTIjkf+tWhFSXTEbINdpr/YqnU/lq2I9VonBTjoNkt9hAE3y/tDgmkMh3edqqQh96m7Ker+8ZFnaQr6PrPT0vzfQdwWCnl9ItiyJNuFlCkoOzYlrp1+OIzNaQIDAQAB"
 }