[ENGG-1682] feat: rules executions support; extension icon green, executed rules in popup

browser-extension/mv3/src/client-scripts/ajaxRequestInterceptor.js

@@ -253,7 +253,7 @@ import { PUBLIC_NAMESPACE } from "common/constants";
  {
  source: "requestly:client",
  action: "response_rule_applied",
- ruleId: message.ruleDetails.id,
+ rule: message.ruleDetails,
  requestDetails: message["requestDetails"],
  },
  window.location.href
@@ -265,7 +265,7 @@ import { PUBLIC_NAMESPACE } from "common/constants";
  {
  source: "requestly:client",
  action: "request_rule_applied",
- ruleId: message.ruleDetails.id,
+ rule: message.ruleDetails,
  requestDetails: message["requestDetails"],
  },
  window.location.href

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

@@ -1,18 +1,17 @@
 import { EXTENSION_MESSAGES } from "common/constants";
-import { initRuleExecutionHandler } from "./ruleExecution";
 import { initSessionRecording } from "./sessionRecorder";
 import { initResponseRuleHandler } from "./responseRuleHandler";
 import { initRequestRuleHandler } from "./requestRuleHandler";
 import { Variable, getVariable } from "../../service-worker/variable";
-import { initPageScriptMessageListener } from "./pageScriptMessageHandler";
+import { initPageScriptMessageListener } from "./pageScriptMessageListener";
 
 if (document.doctype?.name === "html" || document.contentType?.includes("html")) {
  getVariable<boolean>(Variable.IS_EXTENSION_ENABLED, true).then((isExtensionStatusEnabled) => {
  if (isExtensionStatusEnabled) {
  chrome.runtime.sendMessage({ action: EXTENSION_MESSAGES.HANDSHAKE_CLIENT });
  initSessionRecording();
  initPageScriptMessageListener();
- initRuleExecutionHandler();
+ // initRuleExecutionHandler();
  initResponseRuleHandler();
  initRequestRuleHandler();
  }

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

@@ -0,0 +1,21 @@
+import { EXTENSION_MESSAGES } from "common/constants";
+
+export const initPageScriptMessageListener = () => {
+ window.addEventListener("message", function (event) {
+ if (event.source !== window || event.data.source !== "requestly:client") {
+ return;
+ }
+
+ switch (event.data.action) {
+ case "response_rule_applied":
+ case "request_rule_applied":
+ // tabId not populated from content script. Popuplate in service worker
+ chrome.runtime.sendMessage({
+ action: EXTENSION_MESSAGES.RULE_EXECUTED,
+ rule: event.data.rule,
+ requestDetails: event.data.requestDetails,
+ });
+ break;
+ }
+ });
+};

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

@@ -11,37 +11,8 @@ let implictTestRuleWidgetConfig: Record<string, any> = null;
 export const initRuleExecutionHandler = () => {
  fetchAndStoreImplicitTestRuleWidgetConfig();
 
- window.addEventListener("message", function (event) {
- if (event.source !== window || event.data.source !== "requestly:client") {
- return;
- }
-
- switch (event.data.action) {
- case "response_rule_applied":
- case "request_rule_applied":
- appliedRuleIds.add(event.data.ruleId);
- handleAppliedRuleNotification(event.data.ruleId);
- break;
- }
- });
-
  chrome.runtime.onMessage.addListener((message, _, sendResponse) => {
  switch (message.action) {
- case CLIENT_MESSAGES.UPDATE_APPLIED_SCRIPT_RULES:
- message.ruleIds.forEach((ruleId: string) => {
- appliedRuleIds.add(ruleId);
- handleAppliedRuleNotification(ruleId);
- });
- break;
- case CLIENT_MESSAGES.GET_APPLIED_RULES:
- sendResponse(Array.from(appliedRuleIds));
- break;
- case CLIENT_MESSAGES.SYNC_APPLIED_RULES:
- message.appliedRuleIds.forEach((ruleId: string) => {
- appliedRuleIds.add(ruleId);
- handleAppliedRuleNotification(ruleId);
- });
- break;
  case CLIENT_MESSAGES.START_EXPLICIT_RULE_TESTING:
  if (message.record) {
  chrome.runtime.sendMessage({

browser-extension/mv3/src/service-worker/index.ts

@@ -1,16 +1,16 @@
 import { registerCommands } from "./services/commands";
 import { initContextMenu } from "./services/contextMenu";
-import { initExtensionIcon } from "./services/extensionIcon";
 import { handleInstallUninstall } from "./services/installUninstall";
 import { initMessageHandler } from "./services/messageHandler";
 import { initRulesManager } from "./services/rulesManager";
+import { initWebRequestInterceptor } from "./services/webRequestInterceptor";
 
 // initialize
 (async () => {
- initExtensionIcon();
  registerCommands();
  handleInstallUninstall();
  initRulesManager();
  initMessageHandler();
  initContextMenu();
+ initWebRequestInterceptor();
 })();

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

@@ -1,5 +1,5 @@
 import { onVariableChange, setVariable, Variable } from "../variable";
-import { disableExtensionIcon, enableExtensionIcon } from "./extensionIcon";
+import extensionIconManager from "./extensionIconManager";
 import { isExtensionEnabled } from "./utils";
 
 // TODO: fix circular dependency
@@ -20,9 +20,9 @@ export const updateActivationStatus = (isExtensionEnabled: boolean) => {
  });
 
  if (isExtensionEnabled) {
- enableExtensionIcon();
+ extensionIconManager.markExtensionEnabled();
  } else {
- disableExtensionIcon();
+ extensionIconManager.markExtensionDisabled();
  }
 
  // sendMessageToApp({ isExtensionEnabled });

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

@@ -0,0 +1,117 @@
+import { tabService } from "./tabService";
+
+interface ExtensionIconConfig {
+ ruleExecuted?: boolean;
+ isRecording?: boolean;
+}
+
+class ExtensionIconManager {
+ #isExtensionDisabled = false;
+
+ #icons = {
+ DEFAULT: "/resources/images/48x48.png",
+ DISABLED: "/resources/images/48x48_greyscale.png",
+ RULE_EXECUTED: "/resources/images/48x48_green.png",
+ DEFAULT_WITH_REC: "/resources/images/48x48_rec.png",
+ RULE_EXECUTED_WITH_REC: "/resources/images/48x48_green_rec.png",
+ };
+
+ #CONSTANTS = {
+ PAGE_DATA_ICON_CONFIG: "extensionIconConfig",
+ };
+
+ constructor() {
+ chrome.tabs.onUpdated.addListener((tabId) => {
+ // FIXME: Can be made better by only listening to url changes on tabs
+ this.#updateIconState(tabId);
+ });
+ }
+
+ #getDefaultConfig(): ExtensionIconConfig {
+ return {
+ ruleExecuted: false,
+ isRecording: false,
+ };
+ }
+
+ #getIcon(config: ExtensionIconConfig) {
+ if (this.#isExtensionDisabled) {
+ return this.#icons.DISABLED;
+ }
+
+ if (config.ruleExecuted) {
+ if (config.isRecording) {
+ return this.#icons.RULE_EXECUTED_WITH_REC;
+ }
+
+ return this.#icons.RULE_EXECUTED;
+ }
+
+ if (config.isRecording) {
+ return this.#icons.DEFAULT_WITH_REC;
+ }
+
+ return this.#icons.DEFAULT;
+ }
+
+ #updateIconState(tabId?: number, newConfigKey?: keyof ExtensionIconConfig, newConfigValue?: boolean) {
+ let config = tabService.getPageData(tabId, this.#CONSTANTS.PAGE_DATA_ICON_CONFIG) || this.#getDefaultConfig();
+
+ if (newConfigKey && config[newConfigKey] !== newConfigValue) {
+ config = { ...config, [newConfigKey]: newConfigValue };
+ tabService.setPageData(tabId, this.#CONSTANTS.PAGE_DATA_ICON_CONFIG, config);
+ }
+
+ this.#setExtensionIcon(this.#getIcon(config), tabId);
+ // tabService.setExtensionIcon(this.#getIcon(config), tabId);
+ }
+
+ #updateIconStateForAllTabs() {
+ const tabsMap = tabService.getTabs();
+ const tabsWithIconConfig = Object.values(tabsMap).filter((tab) => {
+ if (tab && tab.pageData) {
+ return !!tab.pageData[this.#CONSTANTS.PAGE_DATA_ICON_CONFIG];
+ }
+ return false;
+ });
+ tabsWithIconConfig.forEach((tab) => this.#updateIconState(tab.id));
+ }
+
+ #setExtensionIcon(path: string, tabId?: number) {
+ if (tabId === undefined) {
+ chrome.action.setIcon({ path });
+ } else {
+ chrome.action.setIcon({ path, tabId });
+ }
+ }
+
+ markExtensionEnabled = () => {
+ this.#isExtensionDisabled = false;
+ this.#setExtensionIcon(this.#icons.DEFAULT);
+ // tabService.setExtensionIcon(this.#icons.DEFAULT);
+ this.#updateIconStateForAllTabs();
+ };
+
+ markExtensionDisabled = () => {
+ this.#isExtensionDisabled = true;
+ this.#setExtensionIcon(this.#icons.DISABLED);
+ // tabService.setExtensionIcon(this.#icons.DISABLED);
+ this.#updateIconStateForAllTabs();
+ };
+
+ markRuleExecuted(tabId: number) {
+ this.#updateIconState(tabId, "ruleExecuted", true);
+ }
+
+ markRecording(tabId: number) {
+ this.#updateIconState(tabId, "isRecording", true);
+ }
+
+ markNotRecording(tabId: number) {
+ this.#updateIconState(tabId, "isRecording", false);
+ }
+}
+
+const extensionIconManager = new ExtensionIconManager();
+
+export default extensionIconManager;

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

@@ -2,7 +2,7 @@ import { CLIENT_MESSAGES, EXTENSION_MESSAGES } from "common/constants";
 import { checkIfNoRulesPresent, getRulesAndGroups } from "common/rulesStore";
 import { initClientHandler } from "./clientHandler";
 import { getAppTabs, isExtensionEnabled, toggleExtensionStatus } from "./utils";
-import { getExecutedRules, handleRuleExecutionsOnClientPageLoad } from "./rulesManager";
+// import { handleRuleExecutionsOnClientPageLoad } from "./rulesManager";
 import { applyScriptRules } from "./scriptRuleHandler";
 import {
  cacheRecordedSessionOnClientPageUnload,
@@ -24,6 +24,7 @@ import {
  launchUrlAndStartRuleTesting,
  saveTestRuleResult,
 } from "./testThisRuleHandler";
+import ruleExecutionHandler from "./ruleExecutionHandler";
 
 // TODO: relay this message from content script to app, so UI could be updated immediately
 export const sendMessageToApp = (messageObject: unknown, callback?: () => void) => {
@@ -52,7 +53,7 @@ export const initMessageHandler = () => {
  break;
 
  case EXTENSION_MESSAGES.CLIENT_PAGE_LOADED:
- handleRuleExecutionsOnClientPageLoad(sender.tab.id);
+ ruleExecutionHandler.processTabCachedRulesExecutions(sender.tab.id);
  handleTestRuleOnClientPageLoad(sender.tab);
  handleSessionRecordingOnClientPageLoad(sender.tab, sender.frameId);
  break;
@@ -94,7 +95,7 @@ export const initMessageHandler = () => {
  return true;
 
  case EXTENSION_MESSAGES.GET_EXECUTED_RULES:
- getExecutedRules(message.tabId).then(sendResponse);
+ ruleExecutionHandler.getExecutedRules(message.tabId).then(sendResponse);
  return true;
 
  case EXTENSION_MESSAGES.CHECK_IF_NO_RULES_PRESENT:
@@ -128,6 +129,11 @@ export const initMessageHandler = () => {
  case EXTENSION_MESSAGES.SAVE_TEST_RULE_RESULT:
  saveTestRuleResult(message, sender.tab);
  break;
+
+ case EXTENSION_MESSAGES.RULE_EXECUTED:
+ const requestDetails = { ...message.requestDetails, tabId: message.requestDetails?.tabId || sender.tab?.id };
+ ruleExecutionHandler.onRuleExecuted(message.rule, requestDetails);
+ break;
  }
 
  return false;

browser-extension/mv3/src/service-worker/services/requestProcessor/types.ts

@@ -3,7 +3,7 @@ export interface AJAXRequestDetails {
  method: string;
  type: "xmlhttprequest";
  initiatorDomain: string;
- requestHeaders: Record<string, string>;
+ requestHeaders?: Record<string, string>;
 }
 
 export enum SessionRuleType {

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

@@ -0,0 +1,57 @@
+import { Rule } from "common/types";
+import extensionIconManager from "./extensionIconManager";
+import { DataScope, TAB_SERVICE_DATA, tabService } from "./tabService";
+import { getRecords } from "common/storage";
+
+interface RulesExecutionLog {
+ ruleId: string;
+ requestDetails: chrome.webRequest.WebRequestDetails | chrome.webRequest.WebResponseDetails;
+}
+
+class RuleExecutionHandler {
+ constructor() {}
+
+ getExecutedRules = async (tabId: number) => {
+ const rulesExecutionLogs: RulesExecutionLog[] =
+ tabService.getPageData(tabId, TAB_SERVICE_DATA.RULES_EXECUTION_LOGS, []) || [];
+
+ const appliedRuleIds = rulesExecutionLogs.map((executionLog) => executionLog.ruleId).filter((id) => !!id);
+ const uniqueAppliedRuleIds = Array.from(new Set(appliedRuleIds));
+ const appliedRules = await getRecords(uniqueAppliedRuleIds);
+ return appliedRules;
+ };
+
+ processTabCachedRulesExecutions = (tabId: number) => {
+ const rulesExecutionLogs: RulesExecutionLog[] =
+ tabService.getData(tabId, TAB_SERVICE_DATA.RULES_EXECUTION_LOGS, []) || [];
+
+ rulesExecutionLogs.forEach((executionLog) => {
+ this.onRuleExecuted({ id: executionLog.ruleId } as Rule, executionLog.requestDetails);
+ });
+
+ tabService.removeData(tabId, TAB_SERVICE_DATA.RULES_EXECUTION_LOGS);
+ };
+
+ onRuleExecuted = (
+ rule: Rule,
+ requestDetails: chrome.webRequest.WebRequestDetails | chrome.webRequest.WebResponseDetails,
+ isMainFrameRequest?: boolean
+ ) => {
+ const tabDataScope = isMainFrameRequest ? DataScope.TAB : DataScope.PAGE;
+
+ extensionIconManager.markRuleExecuted(requestDetails.tabId);
+
+ const rulesExecutionLogs: RulesExecutionLog[] =
+ tabService.getDataForScope(tabDataScope, requestDetails.tabId, TAB_SERVICE_DATA.RULES_EXECUTION_LOGS, []) || [];
+ rulesExecutionLogs.push({ ruleId: rule.id, requestDetails });
+ tabService.setDataForScope(
+ tabDataScope,
+ requestDetails.tabId,
+ TAB_SERVICE_DATA.RULES_EXECUTION_LOGS,
+ rulesExecutionLogs
+ );
+ };
+}
+
+const ruleExecutionHandler = new RuleExecutionHandler();
+export default ruleExecutionHandler;