One big actor in this process is calculator_desktop-[hash].js, which defines a bunch of AMD modules then requires the module toplevel/calculator_desktop. DesModder patches some of the code to change up some internals, but it can only do this by running some JavaScript code before toplevel/calculator_desktop runs. The loading order of script tags is complicated, but TL;DR it's hard to get code to run before the main calculator_desktop-[hash].js.

The current approach that DesModder takes is:

1. Completely block calculator_desktop-[hash].js from loading (using extension APIs often used for ad blocking).
2. Run the code that needs to run before toplevel/calculator_desktop.
3. Load the main Desmos code (calculator_desktop-[hash].js).
4. Load the main DesModder code.

(I say current approach because an alternative is in the works, but it does not work on Firefox, and probably does not work as of the January 9th incremental Desmos update).

A lower-level description of what DesModder does is as follows:

1. Block calculator_desktop-[hash].js (see net_request_rules.md for more info)

2. Content script preloadContent.js (compiled from src/preload/content.ts) runs on document_start. Its primary purpose is to inject preloadScript.js into the page

3. preloadScript.js (compiled from src/preload/script.ts) does many things in order:

   a. Override window.ALMOND_OVERRIDES to replace Desmos' Almond AMD loader with a custom loader that overrides some modules.

   b. Obtain the URL of calculator_desktop-[hash].js, and insert this content into the page via a script element.

   c. Once the main JS loads, call runDesModder.

4. The sole purpose of runDesModder inside preloadScript.js is to load the rest of the DesModder code. It sends the message get-script-url to the content script, which sends back the extension-prefixed url that points to script.js. This is then inserted as a script element, so script.js runs.

5. script.js (compiled from src/script.ts) is the main DesModder code. It loads all the features of DesModder. Done!