Merge pull request #1 from myWsq/refactor/v2

Refactor/v2

packages/background/package.json

@@ -7,6 +7,8 @@
     "build": "tsc && vite build"
   },
   "dependencies": {
-    "p-debounce": "^4.0.0"
+    "p-debounce": "^4.0.0",
+    "shared": "workspace:*",
+    "zod": "^3.17.3"
   }
 }

packages/background/src/catchError.ts

@@ -0,0 +1,27 @@
+import { MessageSchemaType } from "shared/schemas";
+
+export async function catchError(error: any) {
+  try {
+    const message: MessageSchemaType = {
+      action: "error",
+      payload: error.message ?? String(error),
+    };
+    await chrome.runtime.sendMessage(message);
+  } catch (error) {
+    // ignore error
+    console.error(error);
+  }
+}
+
+export async function clearError() {
+  try {
+    const message: MessageSchemaType = {
+      action: "error",
+      payload: "",
+    };
+    await chrome.runtime.sendMessage(message);
+  } catch (error) {
+    // ignore error
+    console.error(error);
+  }
+}

packages/background/src/const.ts

@@ -0,0 +1,4 @@
+const STORAGE_VERSION = "v2";
+
+export const RULE_DATA_STORAGE_KEY = STORAGE_VERSION + "/" + "ruleList";
+export const GLOBAL_ACTIVE_KEY = STORAGE_VERSION + "/" + "globalActive";

packages/background/src/listenMatchedRule.ts

@@ -0,0 +1,28 @@
+import { LogSchemaType } from "shared/schemas";
+
+export const LogsTempStorage: Record<number, LogSchemaType[]> = {};
+
+// @see https://developer.chrome.com/docs/extensions/reference/declarativeNetRequest/#event-onRuleMatchedDebug
+export function listenMatchedRule() {
+  chrome.declarativeNetRequest.onRuleMatchedDebug?.addListener(
+    ({ request, rule }) => {
+      const logs = LogsTempStorage[request.tabId] || [];
+      logs.unshift({
+        method: request.method,
+        url: request.url,
+        ruleId: rule.ruleId,
+      });
+      LogsTempStorage[request.tabId] = logs;
+    }
+  );
+
+  chrome.tabs.onUpdated.addListener((tabId, info) => {
+    if (info.status === "loading") {
+      delete LogsTempStorage[tabId];
+    }
+  });
+
+  chrome.tabs.onRemoved.addListener((tabId) => {
+    delete LogsTempStorage[tabId];
+  });
+}

packages/background/src/listenMessage.ts

@@ -0,0 +1,90 @@
+import { MessageSchemaType, RuleSchema } from "shared/schemas";
+import { GLOBAL_ACTIVE_KEY, RULE_DATA_STORAGE_KEY } from "./const";
+import { updateRules } from "./updateRules";
+import { z } from "zod";
+import pDebounce from "p-debounce";
+import { LogsTempStorage } from "./listenMatchedRule";
+
+const setRuleDebounce = pDebounce(updateRules, 300);
+
+const handlers: Record<
+  string,
+  (body: any, sender: chrome.runtime.MessageSender) => Promise<any>
+> = {
+  // ----------------------------------------------------------------
+  async getRuleData() {
+    const data = await chrome.storage.local.get(RULE_DATA_STORAGE_KEY);
+    return data[RULE_DATA_STORAGE_KEY] || [];
+  },
+
+  // ----------------------------------------------------------------
+  async setRuleData(body) {
+    const rules = z.array(RuleSchema).parse(body);
+
+    // validate and save first
+    await setRuleDebounce(rules, true);
+    await chrome.storage.local.set({
+      [RULE_DATA_STORAGE_KEY]: rules,
+    });
+
+    // if global active, update rule
+    const data = await chrome.storage.local.get(GLOBAL_ACTIVE_KEY);
+    if (data[GLOBAL_ACTIVE_KEY]) {
+      await setRuleDebounce(rules);
+    }
+
+    return rules;
+  },
+
+  // ----------------------------------------------------------------
+  async getGlobalActive() {
+    const data = await chrome.storage.local.get(GLOBAL_ACTIVE_KEY);
+    return Boolean(data[GLOBAL_ACTIVE_KEY]);
+  },
+
+  // ----------------------------------------------------------------
+  async setGlobalActive(body) {
+    const isActive = Boolean(body);
+
+    if (isActive) {
+      const data = await chrome.storage.local.get(RULE_DATA_STORAGE_KEY);
+      await updateRules(data[RULE_DATA_STORAGE_KEY]);
+    } else {
+      await updateRules([]);
+    }
+    await chrome.storage.local.set({
+      [GLOBAL_ACTIVE_KEY]: isActive,
+    });
+    chrome.action.setIcon({
+      path: `../icons/${isActive ? "icon.png" : "icon_inactive.png"}`,
+    });
+  },
+
+  //  --------------------------------------------------------------
+  async getLogs(body) {
+    return LogsTempStorage[body] || [];
+  },
+};
+
+export function listenMessage() {
+  chrome.runtime.onMessage.addListener(
+    async (message: MessageSchemaType, sender) => {
+      if (message.action !== "request") return;
+
+      const response = (body?: any, success = true) =>
+        chrome.runtime.sendMessage<MessageSchemaType>({
+          action: "response",
+          requestId: message.requestId,
+          success,
+          body,
+        });
+
+      try {
+        const result = await handlers[message.key](message.body, sender);
+        await response(result);
+      } catch (error: any) {
+        response(error.message || String(error), false);
+      }
+    }
+  );
+}

packages/background/src/main.ts

@@ -0,0 +1,28 @@
+import { catchError } from "./catchError";
+import { GLOBAL_ACTIVE_KEY, RULE_DATA_STORAGE_KEY } from "./const";
+import { listenMatchedRule } from "./listenMatchedRule";
+import { listenMessage } from "./listenMessage";
+
+self.addEventListener("error", (error) => {
+  catchError(error);
+});
+
+self.addEventListener("unhandledrejection", (error) => {
+  catchError(error.reason);
+});
+
+chrome.runtime.onInstalled.addListener(() => {
+  // default values
+  chrome.storage.local.set({
+    [RULE_DATA_STORAGE_KEY]: [],
+    [GLOBAL_ACTIVE_KEY]: true,
+  });
+
+  // display badge text
+  chrome.declarativeNetRequest.setExtensionActionOptions({
+    displayActionCountAsBadgeText: true,
+  });
+});
+
+listenMessage();
+listenMatchedRule();

packages/background/src/updateRules.ts

@@ -0,0 +1,62 @@
+import { RuleSchemaType } from "shared/schemas";
+
+export async function updateRules(rules: RuleSchemaType[], dryRun = false) {
+  const rulesWithId: (RuleSchemaType & { id: number })[] = rules.map(
+    (rule, i) => ({
+      id: i + 1,
+      ...rule,
+    })
+  );
+  const currentRules = await chrome.declarativeNetRequest.getDynamicRules();
+
+  await chrome.declarativeNetRequest.updateDynamicRules({
+    removeRuleIds: currentRules.map((item) => item.id), // remove current rules
+    addRules: rulesWithId // set new rules
+      .filter(
+        ({ active, headers }) =>
+          active &&
+          headers.filter((header) => header.active && header.key).length > 0
+      )
+      .map((rule) => ({
+        id: rule.id,
+        action: {
+          type: chrome.declarativeNetRequest.RuleActionType.MODIFY_HEADERS,
+          requestHeaders:
+            rule.headers
+              .filter(({ active, key }) => active && key)
+              .map(({ key, value }) => ({
+                header: key,
+                value,
+                operation: chrome.declarativeNetRequest.HeaderOperation.SET,
+              })) || undefined,
+        },
+        condition: {
+          resourceTypes: rule.matchConfig.resourceTypes as any,
+          requestMethods: rule.matchConfig.methods as any,
+          regexFilter:
+            rule.matchConfig.matchMode === "urlRegexp"
+              ? rule.matchConfig.urlRegexp || undefined
+              : undefined,
+          urlFilter:
+            rule.matchConfig.matchMode === "urlFilter"
+              ? rule.matchConfig.urlFilter || undefined
+              : undefined,
+        },
+      })),
+  });
+
+  if (dryRun) {
+    await chrome.declarativeNetRequest.updateDynamicRules({
+      removeRuleIds: rulesWithId.map((rule) => rule.id), // remove new rules
+      addRules: currentRules,
+    });
+  }
+
+  // debug
+  if (import.meta.env.DEV) {
+    console.dir(await chrome.declarativeNetRequest.getDynamicRules(), {
+      depth: Infinity,
+      colors: true,
+    });
+  }
+}

packages/background/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

packages/background/vite.config.ts

@@ -8,7 +8,7 @@ export default defineConfig({
     polyfillDynamicImport: false,
     sourcemap: true,
     lib: {
-      entry: path.resolve(__dirname, "main.ts"),
+      entry: path.resolve(__dirname, "src", "main.ts"),
       formats: ["es"],
       fileName: "main",
     },

packages/extension/manifest.json

@@ -1,26 +1,28 @@
 {
   "name": "Simple Header Modifier",
-  "description": "Modify headers",
-  "version": "1.0",
+  "description": "Modify headers by new declarativeNetRequest API",
+  "version": "2.0",
+  "homepage_url": "https://github.com/myWsq/simple-header-modifier",
+  "minimum_chrome_version": "96",
   "manifest_version": 3,
   "icons": {
-    "16": "icons/icon_16x16.png",
-    "32": "icons/icon_32x32.png",
-    "48": "icons/icon_48x48.png",
-    "128": "icons/icon_128x128.png"
+    "128": "icons/icon.png"
   },
   "action": {
     "default_popup": "popup/index.html",
     "default_icon": {
-      "16": "icons/icon_inactive_16x16.png",
-      "32": "icons/icon_inactive_32x32.png",
-      "48": "icons/icon_inactive_48x48.png",
-      "128": "icons/icon_inactive_128x128.png"
+      "128": "icons/icon.png"
     }
   },
   "background": {
     "service_worker": "background/main.es.js"
   },
   "host_permissions": ["<all_urls>"],
-  "permissions": ["storage", "declarativeNetRequest"]
+  "permissions": [
+    "storage",
+    "tabs",
+    "declarativeNetRequest",
+    "declarativeNetRequestWithHostAccess",
+    "declarativeNetRequestFeedback"
+  ]
 }