Chrome extension to mark every problem as easy (#434)

miorel · web-flow · commit d32e46c26bd7 · 2024-09-22T00:23:23.000-07:00
diff --git a/package.json b/package.json
@@ -14,6 +14,7 @@
     "workspaces/generate-health-report",
     "workspaces/javascript-leetcode-month",
     "workspaces/leetcode-api",
+    "workspaces/leetcode-zen-mode",
     "workspaces/post-leetcode-potd-to-discord",
     "workspaces/repository-scripts",
     "workspaces/util"
diff --git a/workspaces/chrome-extension-hello-world/webpack.config.ts b/workspaces/chrome-extension-hello-world/webpack.config.ts
@@ -2,7 +2,7 @@ import path from "node:path";
 
 import type { Configuration } from "webpack";
 
-import packageJson from "./package.json" with { type: "module" };
+import packageJson from "./package.json" with { type: "json" };
 
 const config: Configuration = {
   target: "web",
diff --git a/workspaces/download-leetcode-submissions/webpack.config.ts b/workspaces/download-leetcode-submissions/webpack.config.ts
@@ -9,7 +9,7 @@ import webpack, {
 import { stripPrefix } from "@code-chronicles/util/stripPrefix";
 import { stripPrefixOrThrow } from "@code-chronicles/util/stripPrefixOrThrow";
 
-import packageJson from "./package.json" with { type: "module" };
+import packageJson from "./package.json" with { type: "json" };
 
 const config: Configuration = {
   target: "node",
diff --git a/workspaces/fetch-leetcode-problem-list/webpack.config.ts b/workspaces/fetch-leetcode-problem-list/webpack.config.ts
@@ -9,7 +9,7 @@ import webpack, {
 import { stripPrefix } from "@code-chronicles/util/stripPrefix";
 import { stripPrefixOrThrow } from "@code-chronicles/util/stripPrefixOrThrow";
 
-import packageJson from "./package.json" with { type: "module" };
+import packageJson from "./package.json" with { type: "json" };
 
 const config: Configuration = {
   target: "node",
diff --git a/workspaces/fetch-recent-accepted-leetcode-submissions/webpack.config.ts b/workspaces/fetch-recent-accepted-leetcode-submissions/webpack.config.ts
@@ -9,7 +9,7 @@ import webpack, {
 import { stripPrefix } from "@code-chronicles/util/stripPrefix";
 import { stripPrefixOrThrow } from "@code-chronicles/util/stripPrefixOrThrow";
 
-import packageJson from "./package.json" with { type: "module" };
+import packageJson from "./package.json" with { type: "json" };
 
 const config: Configuration = {
   target: "node",
diff --git a/workspaces/generate-health-report/src/main.ts b/workspaces/generate-health-report/src/main.ts
@@ -17,6 +17,7 @@ const COMMANDS = [
   "yarn workspace @code-chronicles/fetch-leetcode-problem-list build",
   "yarn workspace @code-chronicles/fetch-recent-accepted-leetcode-submissions build",
   "yarn workspace @code-chronicles/leetcode-api validate-graphql-schema",
+  "yarn workspace @code-chronicles/leetcode-zen-mode build",
   "yarn workspace @code-chronicles/post-leetcode-potd-to-discord build",
 ];
 
diff --git a/workspaces/leetcode-zen-mode/.gitignore b/workspaces/leetcode-zen-mode/.gitignore
@@ -0,0 +1 @@
+dist/
diff --git a/workspaces/leetcode-zen-mode/README.md b/workspaces/leetcode-zen-mode/README.md
@@ -0,0 +1,32 @@
+# @code-chronicles/leetcode-zen-mode
+
+Chrome extension that makes every LeetCode problem feel easy!
+
+To use:
+
+1. **Build the extension:**
+
+   ```sh
+   # It's easiest to do this from the package's directory:
+   cd workspaces/leetcode-zen-mode
+
+   # Install dependencies, if you haven't already:
+   yarn
+
+   # Build the extension:
+   yarn build
+   ```
+
+2. **Load the extension into Chrome.** The built extension will be in a directory named `dist`. You will have to load it as an "unpacked extension", using Developer mode. See [the official tutorial](https://developer.chrome.com/docs/extensions/get-started/tutorial/hello-world#load-unpacked).
+
+## Development
+
+Like the rest of the [Code Chronicles Leetcode ecosystem](../../), this package is structured as a Node module, using [Yarn](https://yarnpkg.com/) as the package manager.
+
+You can install dependencies by running `yarn`, either in this package's directory, or in the repository root. The usual `yarn format`, `yarn lint`, and `yarn typecheck` scripts are available to aid in development and occasionally to annoy. Read more in the repository's general [development guide](../../DEVELOPMENT.md).
+
+This package supports an additional `package.json` script:
+
+### `yarn build`
+
+Builds (an unpacked version of) the extension, in a `dist` directory within the package's workspace.
diff --git a/workspaces/leetcode-zen-mode/eslint.config.mjs b/workspaces/leetcode-zen-mode/eslint.config.mjs
@@ -0,0 +1,3 @@
+import config from "@code-chronicles/eslint-config";
+
+export default [...config, { ignores: ["dist/"] }];
diff --git a/workspaces/leetcode-zen-mode/package.json b/workspaces/leetcode-zen-mode/package.json
@@ -0,0 +1,39 @@
+{
+  "name": "@code-chronicles/leetcode-zen-mode",
+  "description": "TODO: add a nice description",
+  "version": "0.0.1",
+  "license": "MIT",
+  "private": false,
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/code-chronicles-code/leetcode-curriculum.git",
+    "directory": "workspaces/leetcode-zen-mode"
+  },
+  "author": {
+    "name": "Miorel-Lucian Palii",
+    "url": "https://github.com/miorel"
+  },
+  "type": "module",
+  "exports": "./src/extension/main.ts",
+  "scripts": {
+    "build": "tsx src/scripts/writeManifest.ts && cross-env NODE_OPTIONS=\"--import tsx\" webpack",
+    "format": "prettier --color --write .",
+    "lint": "eslint --color --max-warnings=0 .",
+    "typecheck": "tsc --pretty --project ."
+  },
+  "dependencies": {
+    "@code-chronicles/util": "workspace:*"
+  },
+  "devDependencies": {
+    "@code-chronicles/eslint-config": "workspace:*",
+    "@types/node": "22.5.5",
+    "cross-env": "7.0.3",
+    "eslint": "9.11.0",
+    "prettier": "3.3.3",
+    "ts-loader": "9.5.1",
+    "tsx": "4.19.1",
+    "typescript": "5.6.2",
+    "webpack": "5.94.0",
+    "webpack-cli": "5.1.4"
+  }
+}
diff --git a/workspaces/leetcode-zen-mode/src/extension/constants.ts b/workspaces/leetcode-zen-mode/src/extension/constants.ts
@@ -0,0 +1 @@
+export const GRAPHQL_XHR_RESPONSE = Symbol("graphql-xhr-response");
diff --git a/workspaces/leetcode-zen-mode/src/extension/main.ts b/workspaces/leetcode-zen-mode/src/extension/main.ts
@@ -0,0 +1,16 @@
+import { setUpFileReaderReadAsTextInterception } from "./setUpFileReaderReadAsTextInterception.ts";
+import { setUpXhrResponseInterception } from "./setUpXhrResponseInterception.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 label Blob objects from XMLHttpRequest responses with a
+  // special symbol, and then later, when reading from the marked Blob
+  // objects, we will rewrite the data a bit.
+
+  setUpXhrResponseInterception();
+  setUpFileReaderReadAsTextInterception();
+}
+
+main();
diff --git a/workspaces/leetcode-zen-mode/src/extension/rewriteGraphQLData.ts b/workspaces/leetcode-zen-mode/src/extension/rewriteGraphQLData.ts
@@ -0,0 +1,18 @@
+import { isObject } from "@code-chronicles/util/isObject";
+import { mapObjectValues } from "@code-chronicles/util/mapObjectValues";
+
+export function rewriteGraphQLData(value: unknown): unknown {
+  if (Array.isArray(value)) {
+    return value.map(rewriteGraphQLData);
+  }
+
+  if (isObject(value)) {
+    return mapObjectValues(value, rewriteGraphQLData);
+  }
+
+  if (value === "Hard" || value === "Medium") {
+    return "Easy";
+  }
+
+  return value;
+}
diff --git a/workspaces/leetcode-zen-mode/src/extension/setUpFileReaderReadAsTextInterception.ts b/workspaces/leetcode-zen-mode/src/extension/setUpFileReaderReadAsTextInterception.ts
@@ -0,0 +1,26 @@
+import { GRAPHQL_XHR_RESPONSE } from "./constants.ts";
+import { rewriteGraphQLData } from "./rewriteGraphQLData.ts";
+
+export function setUpFileReaderReadAsTextInterception(): void {
+  const { readAsText } = FileReader.prototype;
+
+  FileReader.prototype.readAsText = function (blob) {
+    (window as unknown as Record<string, unknown>).foo = blob;
+    if (!(blob instanceof Blob) || !Object.hasOwn(blob, GRAPHQL_XHR_RESPONSE)) {
+      readAsText.apply(
+        this,
+        Array.from(arguments) as Parameters<typeof readAsText>,
+      );
+      return;
+    }
+
+    blob
+      .text()
+      .then((text) =>
+        readAsText.call(
+          this,
+          new Blob([JSON.stringify(rewriteGraphQLData(JSON.parse(text)))]),
+        ),
+      );
+  };
+}
diff --git a/workspaces/leetcode-zen-mode/src/extension/setUpXhrResponseInterception.ts b/workspaces/leetcode-zen-mode/src/extension/setUpXhrResponseInterception.ts
@@ -0,0 +1,24 @@
+import { GRAPHQL_XHR_RESPONSE } from "./constants.ts";
+
+export function setUpXhrResponseInterception(): void {
+  const xhrResponseDescriptor = Object.getOwnPropertyDescriptor(
+    XMLHttpRequest.prototype,
+    "response",
+  )!;
+
+  Object.defineProperty(XMLHttpRequest.prototype, "response", {
+    ...xhrResponseDescriptor,
+    get() {
+      const res = xhrResponseDescriptor.get!.call(this);
+      if (
+        this.responseURL === "https://leetcode.com/graphql/" &&
+        res instanceof Blob &&
+        res.type === "application/json"
+      ) {
+        (res as unknown as Record<PropertyKey, unknown>)[GRAPHQL_XHR_RESPONSE] =
+          true;
+      }
+      return res;
+    },
+  });
+}
diff --git a/workspaces/leetcode-zen-mode/src/scripts/writeManifest.ts b/workspaces/leetcode-zen-mode/src/scripts/writeManifest.ts
@@ -0,0 +1,45 @@
+import { mkdir, writeFile } from "node:fs/promises";
+import path from "node:path";
+
+import packageJson from "../../package.json" with { type: "json" };
+
+// TODO: figure out a way to reuse this in webpack and eslint configs
+const DIST_DIRECTORY = "dist";
+
+async function main(): Promise<void> {
+  await mkdir(DIST_DIRECTORY, { recursive: true });
+
+  await writeFile(
+    path.join(DIST_DIRECTORY, "manifest.json"),
+    JSON.stringify(
+      {
+        name: "LeetCode Zen Mode",
+        description: packageJson.description,
+        version: packageJson.version,
+
+        // eslint-disable-next-line camelcase
+        manifest_version: 3,
+        // eslint-disable-next-line camelcase
+        content_scripts: [
+          {
+            matches: ["https://*.leetcode.com/*"],
+            // TODO: share this constant with webpack
+            js: ["main.js"],
+            // eslint-disable-next-line camelcase
+            run_at: "document_start",
+            world: "MAIN",
+          },
+        ],
+      },
+      // TODO: prettify or not based on NODE_ENV
+      null,
+      2,
+    ) + "\n",
+    { encoding: "utf8" },
+  );
+}
+
+main().catch((err) => {
+  console.error(err);
+  process.exitCode = 1;
+});
diff --git a/workspaces/leetcode-zen-mode/tsconfig.json b/workspaces/leetcode-zen-mode/tsconfig.json
@@ -0,0 +1,3 @@
+{
+  "extends": "../../tsconfig-base.json"
+}
diff --git a/workspaces/leetcode-zen-mode/webpack.config.ts b/workspaces/leetcode-zen-mode/webpack.config.ts
@@ -0,0 +1,34 @@
+import path from "node:path";
+
+import type { Configuration } from "webpack";
+
+import packageJson from "./package.json" with { type: "json" };
+
+const config: Configuration = {
+  target: "web",
+  entry: path.resolve(__dirname, packageJson.exports),
+  output: {
+    filename: "main.js",
+    path: path.resolve(__dirname, "dist"),
+  },
+
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        use: [
+          {
+            loader: "ts-loader",
+            options: {
+              // TODO: Consider using fork-ts-checker-webpack-plugin for typechecking.
+              transpileOnly: true,
+            },
+          },
+        ],
+        exclude: /\bnode_modules\b/,
+      },
+    ],
+  },
+};
+
+export default config;
diff --git a/workspaces/post-leetcode-potd-to-discord/webpack.config.ts b/workspaces/post-leetcode-potd-to-discord/webpack.config.ts
@@ -9,7 +9,7 @@ import webpack, {
 import { stripPrefix } from "@code-chronicles/util/stripPrefix";
 import { stripPrefixOrThrow } from "@code-chronicles/util/stripPrefixOrThrow";
 
-import packageJson from "./package.json" with { type: "module" };
+import packageJson from "./package.json" with { type: "json" };
 
 const config: Configuration = {
   target: "node",
diff --git a/workspaces/repository-scripts/src/scripts.ts b/workspaces/repository-scripts/src/scripts.ts
@@ -76,6 +76,7 @@ export const SCRIPTS_TO_SKIP_BY_WORKSPACE: Readonly<
   "generate-health-report": new Set(["test"]),
   "javascript-leetcode-month": new Set(["test"]),
   "leetcode-api": new Set(["test"]),
+  "leetcode-zen-mode": new Set(["test"]),
   "post-leetcode-potd-to-discord": new Set(["test"]),
   "repository-scripts": new Set(["test"]),
 };
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+import config from "@code-chronicles/eslint-config";`
	`2`	`+`
	`3`	`+export default [...config, { ignores: ["dist/"] }];`