Inject document script using raw HTML to be fast enough to still be able to hijack listener when visiting YouTube channel page directly

package-lock.json

@@ -27,7 +27,7 @@
       ],
       "license": "LGPL-3.0-or-later",
       "dependencies": {
-        "@ajayyy/maze-utils": "^1.1.8",
+        "@ajayyy/maze-utils": "^1.1.9",
         "content-scripts-register-polyfill": "^4.0.2",
         "react": "^18.2.0",
         "react-dom": "^18.2.0"
@@ -67,9 +67,9 @@
       }
     },
     "node_modules/@ajayyy/maze-utils": {
-      "version": "1.1.8",
-      "resolved": "https://registry.npmjs.org/@ajayyy/maze-utils/-/maze-utils-1.1.8.tgz",
-      "integrity": "sha512-0LwL+i/JvQZYBu6BadYX77XUoU0QVJZXCaElihVTO7suuZ9rracJX7w7A/p12whR/bQ2pO2bCqIvXuWoOiln0Q==",
+      "version": "1.1.9",
+      "resolved": "https://registry.npmjs.org/@ajayyy/maze-utils/-/maze-utils-1.1.9.tgz",
+      "integrity": "sha512-fU85QRrSBAP31ppFs+Gzfm9vHx+4wFFDr8pSoT747+w6L6cMPlubWG0lFquRTjffStfZlw33kGJOSuwXNiYbAA==",
       "funding": [
         {
           "type": "individual",
@@ -13858,9 +13858,9 @@
   },
   "dependencies": {
     "@ajayyy/maze-utils": {
-      "version": "1.1.8",
-      "resolved": "https://registry.npmjs.org/@ajayyy/maze-utils/-/maze-utils-1.1.8.tgz",
-      "integrity": "sha512-0LwL+i/JvQZYBu6BadYX77XUoU0QVJZXCaElihVTO7suuZ9rracJX7w7A/p12whR/bQ2pO2bCqIvXuWoOiln0Q=="
+      "version": "1.1.9",
+      "resolved": "https://registry.npmjs.org/@ajayyy/maze-utils/-/maze-utils-1.1.9.tgz",
+      "integrity": "sha512-fU85QRrSBAP31ppFs+Gzfm9vHx+4wFFDr8pSoT747+w6L6cMPlubWG0lFquRTjffStfZlw33kGJOSuwXNiYbAA=="
     },
     "@ampproject/remapping": {
       "version": "2.2.0",

package.json

@@ -4,7 +4,7 @@
   "description": "",
   "main": "background.js",
   "dependencies": {
-    "@ajayyy/maze-utils": "^1.1.8",
+    "@ajayyy/maze-utils": "^1.1.9",
     "content-scripts-register-polyfill": "^4.0.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

src/content.ts

@@ -45,6 +45,7 @@ import { getHash, HashedValue } from "@ajayyy/maze-utils/lib/hash";
 import { generateUserID } from "@ajayyy/maze-utils/lib/setup";
 import { setThumbnailListener, updateAll } from "@ajayyy/maze-utils/lib/thumbnailManagement";
 import { labelThumbnails, setupThumbnailPageLoadListener } from "./utils/thumbnails";
+import * as documentScript from "../dist/js/document.js";
 
 const utils = new Utils();
 
@@ -111,7 +112,8 @@ setupVideoModule({
         updatePreviewBar();
         updateVisibilityOfPlayerControlsButton();
     },
-    resetValues
+    resetValues,
+    documentScript
 }, () => Config);
 setThumbnailListener(labelThumbnails);
 setupThumbnailPageLoadListener();

webpack/webpack.common.js

@@ -25,37 +25,103 @@ const edgeLanguages = [
     "zh_CN"
 ]
 
-module.exports = env => ({
+
+
+module.exports = env => {
+    const documentScriptBuild = webpack({
         entry: {
-        popup: path.join(__dirname, srcDir + 'popup.ts'),
-        background: path.join(__dirname, srcDir + 'background.ts'),
-        content: path.join(__dirname, srcDir + 'content.ts'),
-        options: path.join(__dirname, srcDir + 'options.ts'),
-        help: path.join(__dirname, srcDir + 'help.ts'),
-        permissions: path.join(__dirname, srcDir + 'permissions.ts'),
-        document: path.join(__dirname, srcDir + 'document.ts'),
-        upsell:  path.join(__dirname, srcDir + 'upsell.ts')
+            document: {
+                import: path.join(__dirname, srcDir + 'document.ts'),
+            },
         },
         output: {
             path: path.join(__dirname, '../dist/js'),
         },
-    optimization: {
-        splitChunks: {
-            name: 'vendor',
-            chunks: "initial"
-        }
-    },
         module: {
             rules: [
                 {
                     test: /\.tsx?$/,
                     loader: 'ts-loader',
                     exclude: /node_modules/,
+                    resourceQuery: { not: [/raw/] },
                     options: {
                         // disable type checker for user in fork plugin
                         transpileOnly: true,
                         configFile: env.mode === "production" ? "tsconfig-production.json" : "tsconfig.json"
                     }
+                },
+            ]
+        },
+        resolve: {
+            extensions: ['.ts', '.tsx', '.js']
+        },
+        plugins: [
+            // Don't fork TS checker for document script to speed up
+            // new ForkTsCheckerWebpackPlugin()
+        ]
+    });
+
+    class DocumentScriptCompiler {
+        currentWatching = null;
+
+        /**
+         * 
+         * @param {webpack.Compiler} compiler 
+         */
+        apply(compiler) {
+            compiler.hooks.beforeCompile.tapAsync({ name: 'DocumentScriptCompiler' }, (compiler, callback) => {
+                if (env.WEBPACK_WATCH) {
+                    let first = true;
+                    if (!this.currentWatching) {
+                        this.currentWatching = documentScriptBuild.watch({}, () => {
+                            if (first) {
+                                first = false;
+                                callback();
+                            }
+                        });
+                    } else {
+                        callback();
+                    }
+                } else {
+                    documentScriptBuild.close(() => {
+                        documentScriptBuild.run(() => {
+                            callback();
+                        });
+                    });
+                }
+            });
+        }
+    }
+
+    return {
+        entry: {
+            popup: path.join(__dirname, srcDir + 'popup.ts'),
+            background: path.join(__dirname, srcDir + 'background.ts'),
+            content: path.join(__dirname, srcDir + 'content.ts'),
+            options: path.join(__dirname, srcDir + 'options.ts'),
+            help: path.join(__dirname, srcDir + 'help.ts'),
+            permissions: path.join(__dirname, srcDir + 'permissions.ts'),
+            upsell:  path.join(__dirname, srcDir + 'upsell.ts')
+        },
+        output: {
+            path: path.join(__dirname, '../dist/js'),
+        },
+        module: {
+            rules: [
+                {
+                    test: /\.tsx?$/,
+                    loader: 'ts-loader',
+                    exclude: /node_modules/,
+                    resourceQuery: { not: [/raw/] },
+                    options: {
+                        // disable type checker for user in fork plugin
+                        transpileOnly: true,
+                        configFile: env.mode === "production" ? "tsconfig-production.json" : "tsconfig.json"
+                    }
+                },
+                {
+                    test: /js\/document\.js$/,
+                    type: 'asset/source'
                 }
             ]
         },
@@ -63,6 +129,8 @@ module.exports = env => ({
             extensions: ['.ts', '.tsx', '.js']
         },
         plugins: [
+            // Prehook to start building document script before normal build
+            new DocumentScriptCompiler(),
             // fork TS checker
             new ForkTsCheckerWebpackPlugin(),
             // exclude locale files in moment
@@ -120,4 +188,5 @@ module.exports = env => ({
             }),
             new configDiffPlugin()
         ]
-});
+    };
+};