Added chrome.debugger to monitor network requests

public/manifest.json

@@ -7,9 +7,9 @@
     "default_popup": "popup.html"
   },
   "permissions": [
-    "webRequest",
     "tabs",
-    "storage"
+    "storage",
+    "debugger"
   ],
   "host_permissions": [
     "*://*/*/"

src/background/background.ts

@@ -1,11 +1,7 @@
 import { IBytesRepository } from "../data/bytes/IBytesRepository";
-import {
-    catchPostRequestBodySize,
-    catchRequestHeaderSize,
-    catchResponseSize,
-} from "./webRequestListeners";
+import { addBytesTransferred } from "./backgroundHelpers";
 
-chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
+chrome.runtime.onMessage.addListener(async (message, sender, sendResponse) => {
     if (message === "getBytesTransferred") {
         sendResponse(IBytesRepository.instance.getBytesTransferred());
     }
@@ -15,33 +11,57 @@ chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
     if (message.command === "startRecordingBytesTransferred") {
         IBytesRepository.instance.clearBytesTransferred();
 
-        chrome.webRequest.onBeforeRequest.addListener(
-            catchPostRequestBodySize,
-            { urls: ["<all_urls>"], tabId },
-            ["requestBody"]
-        );
-        chrome.webRequest.onBeforeSendHeaders.addListener(
-            catchRequestHeaderSize,
-            { urls: ["<all_urls>"], tabId },
-            ["requestHeaders"]
-        );
-        chrome.webRequest.onCompleted.addListener(
-            catchResponseSize,
-            { urls: ["<all_urls>"], tabId },
-            ["responseHeaders"]
-        );
+        chrome.debugger.attach({ tabId: tabId }, "1.2", () => {
+            chrome.debugger.sendCommand(
+                { tabId: tabId },
+                "Network.enable",
+                {},
+                () => {
+                    if (chrome.runtime.lastError) {
+                        console.error(chrome.runtime.lastError);
+                    }
+                }
+            );
+        });
+
         sendResponse(true);
     }
 
     if (message.command === "stopRecordingBytesTransferred") {
-        chrome.webRequest.onCompleted.removeListener(catchResponseSize);
-        chrome.webRequest.onBeforeRequest.removeListener(
-            catchPostRequestBodySize
-        );
-        chrome.webRequest.onBeforeSendHeaders.removeListener(
-            catchRequestHeaderSize
-        );
+        try {
+            await chrome.debugger.detach({ tabId: tabId });
+        } catch (e: unknown) {
+            if (
+                (e as Error).message ===
+                `Debugger is not attached to the tab with id: ${tabId}.`
+            ) {
+                console.warn(
+                    `Tried to detach debugger from tab (tabId: ${tabId}) when there was none attached. `
+                );
+                return;
+            }
+            throw e;
+        }
         sendResponse(true);
     }
     return true;
 });
+
+type NetworkParamsType = {
+    encodedDataLength?: number;
+};
+
+chrome.debugger.onEvent.addListener(
+    (source, method: string, params: NetworkParamsType | undefined) => {
+        switch (method) {
+            case "Network.loadingFinished": {
+                if (params?.encodedDataLength && params.encodedDataLength > 0) {
+                    addBytesTransferred(params.encodedDataLength);
+                }
+                break;
+            }
+            default:
+                break;
+        }
+    }
+);

src/background/backgroundHelpers.ts

@@ -0,0 +1,25 @@
+import { IBytesRepository } from "../data/bytes/IBytesRepository";
+
+export const addBytesTransferred = async (bytes: number) => {
+    IBytesRepository.instance.addBytesTransferred(bytes);
+
+    try {
+        await chrome.runtime.sendMessage({
+            command: {
+                bytesTransferredChanged:
+                    IBytesRepository.instance.getBytesTransferred(),
+            },
+        });
+    } catch (e: unknown) {
+        if (
+            (e as Error).message ===
+            "Could not establish connection. Receiving end does not exist."
+        ) {
+            console.warn(
+                `Error Caught: ${e}\nIf popup is open and this error is seen in the console, debugging is required.`
+            );
+        } else {
+            throw e;
+        }
+    }
+};

src/view/popup/usePopup.ts

@@ -83,7 +83,6 @@ export const usePopup = () => {
         }
         try {
             await calculationsRepository.setOngoingCalculation(true);
-            backgroundStopRecordingBytes();
         } catch (e: unknown) {
             if (e instanceof Error) {
                 setError(e.message);