Merge branch 'master' into production

app/package.json

@@ -26,8 +26,7 @@
     "dev": "REACT_APP_ENV=DEV npm start",
     "emulated-dev": "REACT_APP_ENV=EMULATOR npm start",
     "preview": "npm run build && vite preview",
-    "type-check": "tsc --noEmit",
-    "postinstall": "patch-package"
+    "type-check": "tsc --noEmit"
   },
   "browserslist": [
     ">0.2%",
@@ -119,8 +118,8 @@
     "redux-deep-persist": "^1.0.6",
     "redux-persist": "^6.0.0",
     "rehype-raw": "^7.0.0",
-    "rrweb": "2.0.0-alpha.11",
-    "rrweb-player": "2.0.0-alpha.11",
+    "rrweb": "2.0.0-alpha.14",
+    "rrweb-player": "2.0.0-alpha.14",
     "semver": "^7.5.4",
     "styled-components": "^6.1.8",
     "ts-loader": "^9.3.0",
@@ -154,7 +153,6 @@
     "eslint": "^8.57.0",
     "eslint-config-react-app": "^7.0.1",
     "less": "^4.2.0",
-    "patch-package": "^8.0.0",
     "sass": "^1.58.3",
     "source-map-loader": "^3.0.1",
     "typescript": "^4.7.3",

browser-extension/mv3/rollup.config.js

@@ -101,9 +101,17 @@ export default [
     plugins: commonPlugins,
   },
   {
-    input: "src/client-scripts/index.ts",
+    input: "src/page-scripts/sessionRecorderHelper.js",
     output: {
-      file: `${OUTPUT_DIR}/client.js`,
+      file: `${OUTPUT_DIR}/page-scripts/sessionRecorderHelper.ps.js`,
+      format: "iife",
+    },
+    plugins: commonPlugins,
+  },
+  {
+    input: "src/page-scripts/ajaxRequestInterceptor.js",
+    output: {
+      file: `${OUTPUT_DIR}/page-scripts/ajaxRequestInterceptor.ps.js`,
       format: "iife",
     },
     plugins: commonPlugins,

browser-extension/mv3/src/content-scripts/app/index.ts

@@ -1,4 +1,8 @@
-import { initMessageHandler, initExtensionMessageListener } from "./messageHandler";
+import { EXTENSION_MESSAGES } from "common/constants";
+import { isExtensionEnabled } from "../../utils";
+import { initMessageHandler } from "./messageHandler";
+import { initSessionRecording } from "../common/sessionRecorder";
+import { initExtensionMessageListener } from "../common/extensionMessageListener";
 
 document.documentElement.setAttribute("rq-ext-version", chrome.runtime.getManifest()["version"]);
 
@@ -10,3 +14,9 @@ document.documentElement.setAttribute("rq-ext-id", chrome.runtime.id);
 
 initMessageHandler();
 initExtensionMessageListener();
+isExtensionEnabled().then((isExtensionStatusEnabled) => {
+  if (isExtensionStatusEnabled) {
+    chrome.runtime.sendMessage({ action: EXTENSION_MESSAGES.HANDSHAKE_CLIENT });
+    initSessionRecording();
+  }
+});

browser-extension/mv3/src/content-scripts/app/messageHandler.ts

@@ -131,13 +131,3 @@ export const initMessageHandler = () => {
     }
   );
 };
-
-export const initExtensionMessageListener = () => {
-  chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
-    switch (message.action) {
-      case EXTENSION_MESSAGES.NOTIFY_TEST_RULE_REPORT_UPDATED:
-        sendExtensionMessage(message);
-        break;
-    }
-  });
-};

browser-extension/mv3/src/content-scripts/client/index.ts

@@ -1,10 +1,12 @@
 import { EXTENSION_MESSAGES } from "common/constants";
-import { initSessionRecording } from "./sessionRecorder";
+import { initSessionRecording } from "../common/sessionRecorder";
 import { Variable, getVariable } from "../../service-worker/variable";
 import { initPageScriptMessageListener } from "./pageScriptMessageListener";
 import { initTestRuleHandler } from "./testRuleHandler";
+import { initExtensionMessageListener } from "../common/extensionMessageListener";
 
 if (document.doctype?.name === "html" || document.contentType?.includes("html")) {
+  initExtensionMessageListener();
   getVariable<boolean>(Variable.IS_EXTENSION_ENABLED, true).then((isExtensionStatusEnabled) => {
     if (isExtensionStatusEnabled) {
       chrome.runtime.sendMessage({ action: EXTENSION_MESSAGES.HANDSHAKE_CLIENT });

browser-extension/mv3/src/content-scripts/common/extensionMessageListener.ts

@@ -0,0 +1,16 @@
+import { EXTENSION_MESSAGES } from "common/constants";
+import { sendExtensionMessage } from "../app/messageHandler";
+
+export const initExtensionMessageListener = () => {
+  chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
+    switch (message.action) {
+      case EXTENSION_MESSAGES.NOTIFY_TEST_RULE_REPORT_UPDATED:
+        sendExtensionMessage(message);
+        break;
+
+      case EXTENSION_MESSAGES.CLIENT_PAGE_LOADED:
+        chrome.runtime.sendMessage({ action: EXTENSION_MESSAGES.CLIENT_PAGE_LOADED });
+        break;
+    }
+  });
+};

browser-extension/mv3/src/content-scripts/client/sessionRecorder.ts → browser-extension/mv3/src/content-scripts/common/sessionRecorder.ts

@@ -30,11 +30,6 @@ export const initSessionRecording = () => {
       case CLIENT_MESSAGES.START_RECORDING:
         sendStartRecordingEvent(message.payload);
         break;
-      case EXTENSION_MESSAGES.CLIENT_PAGE_LOADED:
-        if (!sessionRecorderState.isRecording) {
-          chrome.runtime.sendMessage({ action: EXTENSION_MESSAGES.CLIENT_PAGE_LOADED });
-        }
-        break;
     }
   });
 

browser-extension/mv3/src/service-worker/services/clientHandler.ts

@@ -1,35 +1,44 @@
 import { generateUrlPattern } from "../../utils";
 import { WEB_URL, OTHER_WEB_URLS } from "../../../../config/dist/config.build.json";
-import { isExtensionEnabled } from "./utils";
+import { isExtensionEnabled } from "../../utils";
 import { Variable, onVariableChange } from "../variable";
 import { RequestRulePair, ResponseRulePair, RuleType } from "common/types";
 import rulesStorageService from "../../rulesStorageService";
 
-const CLIENT_SCRIPT_ID = "client-script";
 const excludeMatchesPatterns = [WEB_URL, ...OTHER_WEB_URLS].map(generateUrlPattern).filter((pattern) => !!pattern);
 
+const CLIENT_SCRIPTS: chrome.scripting.RegisteredContentScript[] = [
+  {
+    id: "page-script-ajaxInterceptor",
+    js: ["page-scripts/ajaxRequestInterceptor.ps.js"],
+    world: "MAIN",
+    allFrames: true,
+    persistAcrossSessions: false,
+    matches: ["http://*/*", "https://*/*"],
+    runAt: "document_start",
+    excludeMatches: excludeMatchesPatterns,
+  },
+  {
+    id: "page-script-sessionRecorder",
+    js: ["page-scripts/sessionRecorderHelper.ps.js"],
+    world: "MAIN",
+    persistAcrossSessions: false,
+    matches: ["http://*/*", "https://*/*"],
+    runAt: "document_start",
+  },
+];
+
 declare const window: {
   responseRules: Record<string, unknown>[];
   requestRules: Record<string, unknown>[];
   [key: string]: any;
 };
 
-/** Loading AJAX Interceptor ASAP */
-const registerClientScript = async () => {
+/** Loading Client scripts ASAP */
+const registerClientScripts = async () => {
   console.log("[registerClientScript]");
   chrome.scripting
-    .registerContentScripts([
-      {
-        id: CLIENT_SCRIPT_ID,
-        js: ["client.js"],
-        world: "MAIN",
-        allFrames: true,
-        persistAcrossSessions: false,
-        matches: ["http://*/*", "https://*/*"],
-        runAt: "document_start",
-        excludeMatches: excludeMatchesPatterns,
-      },
-    ])
+    .registerContentScripts(CLIENT_SCRIPTS)
     .then(() => {
       console.log("[registerClientScript]");
       chrome.scripting
@@ -39,10 +48,10 @@ const registerClientScript = async () => {
     .catch((err) => console.warn("[unregisterClientScript]", "unexpected error", err));
 };
 
-const unregisterClientScript = async () => {
+const unregisterClientScripts = async () => {
   console.log("[unregisterClientScript]");
   return chrome.scripting
-    .unregisterContentScripts({ ids: [CLIENT_SCRIPT_ID] })
+    .unregisterContentScripts({ ids: CLIENT_SCRIPTS.map((script) => script.id) })
     .then(() => {
       console.log("[unregisterClientScript]", "unregisterClientScript complete");
       chrome.scripting
@@ -55,9 +64,9 @@ const unregisterClientScript = async () => {
 const setupClientScript = async (isExtensionStatusEnabled: boolean) => {
   console.log("[initClientHandler.setupClientScript]", { isExtensionEnabled });
   if (isExtensionStatusEnabled) {
-    registerClientScript();
+    registerClientScripts();
   } else {
-    unregisterClientScript();
+    unregisterClientScripts();
   }
 };
 

browser-extension/mv3/src/service-worker/services/contextMenu.ts

@@ -1,6 +1,6 @@
 import { onVariableChange, setVariable, Variable } from "../variable";
 import extensionIconManager from "./extensionIconManager";
-import { isExtensionEnabled } from "./utils";
+import { isExtensionEnabled } from "../../utils";
 
 // TODO: fix circular dependency
 // import { sendMessageToApp } from "./messageHandler";

browser-extension/mv3/src/service-worker/services/messageHandler.ts

@@ -1,6 +1,6 @@
 import { CLIENT_MESSAGES, EXTENSION_MESSAGES } from "common/constants";
 import { checkIfNoRulesPresent, getRulesAndGroups } from "common/rulesStore";
-import { getAppTabs, isExtensionEnabled, toggleExtensionStatus } from "./utils";
+import { getAppTabs, toggleExtensionStatus } from "./utils";
 // import { handleRuleExecutionsOnClientPageLoad } from "./rulesManager";
 import { applyScriptRules } from "./scriptRuleHandler";
 import {
@@ -24,6 +24,7 @@ import {
   saveTestRuleResult,
 } from "./testThisRuleHandler";
 import ruleExecutionHandler from "./ruleExecutionHandler";
+import { isExtensionEnabled } from "../../utils";
 
 // TODO: relay this message from content script to app, so UI could be updated immediately
 export const sendMessageToApp = (messageObject: unknown, callback?: () => void) => {

browser-extension/mv3/src/service-worker/services/rulesManager.ts

@@ -1,7 +1,7 @@
 import config from "common/config";
 import { getEnabledRules, onRuleOrGroupChange } from "common/rulesStore";
 import { getVariable, onVariableChange, setVariable, Variable } from "../variable";
-import { isExtensionEnabled } from "./utils";
+import { isExtensionEnabled } from "../../utils";
 import { TAB_SERVICE_DATA, tabService } from "./tabService";
 import { SessionRuleType } from "./requestProcessor/types";
 

browser-extension/mv3/src/service-worker/services/sessionRecording.ts

@@ -2,10 +2,11 @@ import { CLIENT_MESSAGES } from "common/constants";
 import { getRecord } from "common/storage";
 import { AutoRecordingMode, SessionRecordingConfig, SourceKey, SourceOperator } from "common/types";
 import { matchSourceUrl } from "./ruleMatcher";
-import { injectWebAccessibleScript, isExtensionEnabled } from "./utils";
+import { injectWebAccessibleScript } from "./utils";
 import config from "common/config";
 import { TAB_SERVICE_DATA, tabService } from "./tabService";
 import extensionIconManager from "./extensionIconManager";
+import { isExtensionEnabled } from "../../utils";
 
 const CONFIG_STORAGE_KEY = "sessionRecordingConfig";
 

browser-extension/mv3/src/service-worker/services/utils.ts

@@ -1,6 +1,6 @@
 import { ScriptAttributes, ScriptCodeType, ScriptObject, ScriptType } from "common/types";
-import { getVariable, setVariable, Variable } from "../variable";
-import { getAllSupportedWebURLs } from "../../utils";
+import { setVariable, Variable } from "../variable";
+import { getAllSupportedWebURLs, isExtensionEnabled } from "../../utils";
 import { stopRecordingOnAllTabs } from "./sessionRecording";
 
 /* Do not refer any external variable in below function other than arguments */
@@ -159,10 +159,6 @@ export const isNonBrowserTab = (tabId: number): boolean => {
   return tabId === chrome.tabs.TAB_ID_NONE;
 };
 
-export const isExtensionEnabled = async (): Promise<boolean> => {
-  return await getVariable<boolean>(Variable.IS_EXTENSION_ENABLED, true);
-};
-
 export const toggleExtensionStatus = async () => {
   const extensionEnabledStatus = await isExtensionEnabled();
 

browser-extension/mv3/src/utils.ts

@@ -1,6 +1,7 @@
 import { SourceKey, SourceOperator, UrlSource } from "common/types";
 import config from "common/config";
 import { matchSourceUrl } from "./service-worker/services/ruleMatcher";
+import { Variable, getVariable } from "./service-worker/variable";
 
 export const formatDate = (dateInMillis: number, format: string): string => {
   if (dateInMillis && format === "yyyy-mm-dd") {
@@ -62,3 +63,7 @@ export const getUrlObject = (url: string): URL | undefined => {
     return null;
   }
 };
+
+export const isExtensionEnabled = async (): Promise<boolean> => {
+  return await getVariable<boolean>(Variable.IS_EXTENSION_ENABLED, true);
+};