Redo Chrome extension to be based on patching JSON.parse (#468)

For some reason, I thought that the packages LeetCode uses would implement their own JSON parsing. (This is perhaps because I remembered that some packages like Express implement their own JSON stringification.)

In any case, it looks like the built-in `JSON.parse` is what they use, because we can get the same functionality as before by patching `JSON.parse`. Some of the other functions I've been playing around with while developing the extension are nevertheless useful, so I'm keeping them as part of the `util` workspace.

Author: miorel

workspaces/eslint-config/package.json

@@ -23,8 +23,8 @@
   "dependencies": {
     "@stylistic/eslint-plugin-js": "2.9.0",
     "@stylistic/eslint-plugin-ts": "2.9.0",
-    "@typescript-eslint/eslint-plugin": "8.8.1",
-    "@typescript-eslint/parser": "8.8.1",
+    "@typescript-eslint/eslint-plugin": "8.9.0",
+    "@typescript-eslint/parser": "8.9.0",
     "eslint-import-resolver-typescript": "3.6.3",
     "eslint-plugin-import": "2.31.0",
     "eslint-plugin-import-x": "4.3.1",

workspaces/leetcode-zen-mode/src/extension/injectWebpackChunkLoadingMiddleware.ts

@@ -0,0 +1,98 @@
+import { assignFunctionCosmeticProperties } from "@code-chronicles/util/object-properties/assignFunctionCosmeticProperties";
+import { isNonArrayObject } from "@code-chronicles/util/isNonArrayObject";
+import { isString } from "@code-chronicles/util/isString";
+
+type Middleware = (packageFactory: Function) => Function;
+
+type Push = typeof Array.prototype.push;
+
+/**
+ * Patches `webpack` chunk loading so that we can intercept and patch the
+ * packages used by the page.
+ */
+export function injectWebpackChunkLoadingMiddleware(
+  middlewareFn: Middleware,
+): void {
+  const prevSelf = window.self;
+
+  // TODO: update comment to not be LeetCode-specific
+
+  // LeetCode's `webpack` works by pushing information about chunks onto a
+  // globally defined array named something like `webpackChunk_N_E`. The array
+  // is accessed as `self.webpackChunk_N_E`, so we temporarily proxy
+  // `window.self` so we can detect attempts to define this array, and
+  // inject some middleware into pushes into this array.
+  window.self = new Proxy(prevSelf, {
+    set(target, prop, newValue) {
+      const res = Reflect.set(target, prop, newValue);
+
+      if (!(isString(prop) && prop.startsWith("webpackChunk"))) {
+        return res;
+      }
+
+      if (typeof newValue?.push !== "function") {
+        // TODO: console.error something interesting
+        return res;
+      }
+
+      // Once we've found the magic `webpack` array we remove the proxy,
+      // parts of the page seem to break without this.
+      window.self = prevSelf;
+
+      // The `webpack` bootstrapping code reassigns the array's `push`
+      // method. We will intercept this reassignment so we can patch packages
+      // before they are registered.
+      let push: Push = newValue.push;
+      Object.defineProperty(newValue, "push", {
+        get() {
+          return push;
+        },
+
+        set<TNewPush extends Push>(newPush: TNewPush) {
+          const wrappedNewPush = function (this: ThisParameterType<TNewPush>) {
+            // In practice, `push` gets invoked with one chunk at a time,
+            // but it's easy to not assume that, so we iterate over the
+            // arguments.
+            for (const arg of arguments) {
+              // A chunk is structured as a tuple, the second element in the
+              // tuple is an object map of numbers to functions implementing
+              // each module. We will wrap these functions with our own code.
+              if (!Array.isArray(arg) || arg.length < 2) {
+                // TODO: console.error something interesting
+                continue;
+              }
+
+              const modules = arg[1];
+              // TODO: Array.isArray type refinement is unsafe
+              // TODO: make callsites of "isFoo" clearer on intent, for example here we're checking that modules has meaningful entries
+              if (!isNonArrayObject(modules) && !Array.isArray(modules)) {
+                // TODO: console.error something interesting
+                continue;
+              }
+
+              for (const [key, module] of Object.entries(modules)) {
+                // TODO: make callsites of "isFoo" clearer on intent, for example here we're checking that `module` can be invoked
+                if (typeof module !== "function") {
+                  // TODO: console.error something interesting
+                  continue;
+                }
+
+                modules[key as any] = middlewareFn(module);
+              }
+            }
+
+            return newPush.apply(
+              this,
+              // Slight lie but `.apply` will work with the `arguments` object.
+              arguments as unknown as Parameters<TNewPush>,
+            );
+          };
+
+          push = assignFunctionCosmeticProperties(wrappedNewPush, newPush);
+        },
+      });
+
+      return res;
+    },
+  });
+}

workspaces/leetcode-zen-mode/src/extension/injectXhrBlobResponseMiddleware.ts

@@ -0,0 +1,10 @@
+import { isNonArrayObject } from "@code-chronicles/util/isNonArrayObject";
+import { isString } from "@code-chronicles/util/isString";
+
+export function isArrayOfDataByDifficulty(
+  arr: unknown[],
+): arr is ({ difficulty: string } & Record<string, unknown>)[] {
+  return arr.every(
+    (elem) => isNonArrayObject(elem) && isString(elem.difficulty),
+  );
+}

workspaces/leetcode-zen-mode/src/extension/isArrayOfDataByDifficulty.ts

@@ -1,38 +1,22 @@
-import { mapJsonBlobData } from "@code-chronicles/util/mapJsonBlobData";
+import { injectJsonParseMiddleware } from "@code-chronicles/util/browser-extensions/injectJsonParseMiddleware";
 
-import { injectJsonScriptMiddleware } from "./injectJsonScriptMiddleware.ts";
-import { injectXhrBlobResponseMiddleware } from "./injectXhrBlobResponseMiddleware.ts";
-import { patchWebpackChunkLoading } from "./patchWebpackChunkLoading.ts";
+import { injectWebpackChunkLoadingMiddleware } from "./injectWebpackChunkLoadingMiddleware.ts";
+import { patchPageModule } from "./patchPageModule.ts";
 import { rewriteLeetCodeGraphQLData } from "./rewriteLeetCodeGraphQLData.ts";
 
-function main() {
-  // LeetCode's GraphQL client makes requests through `XMLHttpRequest`, then
-  // reads the data as `Blob` objects using the `FileReader` API.
-  //
-  // So we will inject some middleware to rewrite `XMLHttpRequest` responses
-  // a bit.
-  injectXhrBlobResponseMiddleware((xhr, blob) => {
-    if (xhr.responseURL === "https://leetcode.com/graphql/") {
-      try {
-        return mapJsonBlobData(blob, rewriteLeetCodeGraphQLData);
-      } catch (err) {
-        console.error(err);
-      }
-    }
-
-    // No-op for requests that aren't for LeetCode's GraphQL endpoint.
-    return blob;
-  });
-
-  // LeetCode also reads data stored as JSON within some <script> tags within
-  // the page, for example the __NEXT_DATA__ used by Next.js. We will inject
-  // the middleware there as well.
-  injectJsonScriptMiddleware(rewriteLeetCodeGraphQLData);
+function main(): void {
+  // LeetCode's website gets its data in at least a couple of different ways
+  // (e.g. a GraphQL client that uses `XMLHttpRequest` and a <script> tag
+  // holding pre-fetched data) but they all seem to ultimately go through
+  // the built-in `JSON.parse` for parsing their data! So we can tweak the
+  // website data by injecting some middleware into the `JSON.parse`
+  // built-in.
+  injectJsonParseMiddleware(rewriteLeetCodeGraphQLData);
 
   // Additionally, we will patch some of the actual page code! We will do so
   // by trying to intercept `webpack` chunk loading, so that we can patch the
-  // modules used by the page.
-  patchWebpackChunkLoading();
+  // packages used by the page.
+  injectWebpackChunkLoadingMiddleware(patchPageModule);
 }
 
 main();

workspaces/leetcode-zen-mode/src/extension/main.ts

@@ -15,6 +15,7 @@ type CreateElementFn = (
 export function patchJsxFactory(
   createElementFn: CreateElementFn,
 ): CreateElementFn {
+  // TODO: match the length of createElementFn
   return function (_elementType, props) {
     try {
       // Remove the Difficulty dropdown on `/problemset/`. The dropdown is
@@ -47,6 +48,7 @@ export function patchJsxFactory(
 
     return createElementFn.apply(
       this,
+      // Slight lie but `.apply` will work with the `arguments` object.
       arguments as unknown as Parameters<CreateElementFn>,
     );
   };

workspaces/leetcode-zen-mode/src/extension/patchJsxFactory.ts

@@ -1,16 +1,13 @@
 import { patchJsxFactory } from "./patchJsxFactory.ts";
 
+// TODO: weak set?
 const jsxs = new Set();
 
-export function patchPageModule<TThis, TArgs extends unknown[], TRes>(
-  moduleFn: (this: TThis, ...args: TArgs) => TRes,
-): (this: TThis, ...args: TArgs) => TRes {
-  return function () {
-    const res = moduleFn.apply(
-      this,
-      Array.from(arguments) as Parameters<typeof moduleFn>,
-    );
+export function patchPageModule<T extends Function>(moduleFn: T): T {
+  return function (this: ThisParameterType<T>) {
+    const res = moduleFn.apply(this, arguments);
 
+    // TODO: more defensive programming
     const module = arguments[0].exports;
 
     // The core React module is some module with a `useLayoutEffect` property.
@@ -27,5 +24,5 @@ export function patchPageModule<TThis, TArgs extends unknown[], TRes>(
     }
 
     return res;
-  };
+  } as unknown as T;
 }

workspaces/leetcode-zen-mode/src/extension/patchPageModule.ts

@@ -1,37 +1,24 @@
-import type { JsonArray, JsonObject } from "type-fest";
 import nullthrows from "nullthrows";
 
 import { firstOrThrow } from "@code-chronicles/util/firstOrThrow";
 import { groupBy } from "@code-chronicles/util/groupBy";
 import { isArrayOfNumbers } from "@code-chronicles/util/isArrayOfNumbers";
-import { isNonArrayObject } from "@code-chronicles/util/isNonArrayObject";
-import { isString } from "@code-chronicles/util/isString";
 import { mergeObjects } from "@code-chronicles/util/mergeObjects";
 import { only } from "@code-chronicles/util/only";
 import { sum } from "@code-chronicles/util/sum";
 import { stringToCase, type Case } from "@code-chronicles/util/stringToCase";
 
+import { isArrayOfDataByDifficulty } from "./isArrayOfDataByDifficulty.ts";
 import { PREFERRED_STRING_CASE, STRING_CASE_CHECKERS } from "./stringCase.ts";
 
-function isArrayOfDataByDifficulty(
-  arr: JsonArray,
-): arr is ({ difficulty: string } & JsonObject)[] {
-  return arr.every(
-    (elem) =>
-      isNonArrayObject(elem) &&
-      Object.hasOwn(elem, "difficulty") &&
-      isString(elem.difficulty),
-  );
-}
-
 /**
  * Some of the LeetCode GraphQL data is aggregate statistics about problems
  * by difficulty. This function detects instances of this and tries to
  * re-aggregate.
  */
 export function rewriteLeetCodeAggregateDataForDifficulty(
-  arr: JsonArray,
-): JsonArray {
+  arr: unknown[],
+): unknown[] {
   // Do nothing if it's not the kind of data we're looking for.
   if (!isArrayOfDataByDifficulty(arr)) {
     return arr;