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

1 files changed, 156 insertions, 87 deletions

diff --git a/webpack/webpack.common.js b/webpack/webpack.common.js
index 0be6c63c..75583107 100644
--- a/webpack/webpack.common.js
+++ b/webpack/webpack.common.js
@@ -25,99 +25,168 @@ const edgeLanguages = [
     "zh_CN"
 ]
 
-module.exports = env => ({
-    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')
-    },
-    output: {
-        path: path.join(__dirname, '../dist/js'),
-    },
-    optimization: {
-        splitChunks: {
-            name: 'vendor',
-            chunks: "initial"
-        }
-    },
-    module: {
-        rules: [
-            {
-                test: /\.tsx?$/,
-                loader: 'ts-loader',
-                exclude: /node_modules/,
-                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: [
-        // fork TS checker
-        new ForkTsCheckerWebpackPlugin(),
-        // exclude locale files in moment
-        new CopyPlugin({
-            patterns: [
+
+
+module.exports = env => {
+    const documentScriptBuild = webpack({
+        entry: {
+            document: {
+                import: path.join(__dirname, srcDir + 'document.ts'),
+            },
+        },
+        output: {
+            path: path.join(__dirname, '../dist/js'),
+        },
+        module: {
+            rules: [
                 {
-                    from: '.',
-                    to: '../',
-                    globOptions: {
-                    ignore: ['manifest.json'],
-                    },
-                    context: './public',
-                    filter: async (path) => {
-                        if (path.match(/\/_locales\/.+/)) {
-                            if (env.browser.toLowerCase() === "edge" 
-                                    && !edgeLanguages.includes(path.match(/(?<=\/_locales\/)[^/]+(?=\/[^/]+$)/)[0])) {
-                                return false;
-                            }
+                    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()
+        ]
+    });
 
-                            const data = await fs.promises.readFile(path);
-                            const parsed = JSON.parse(data.toString());
+    class DocumentScriptCompiler {
+        currentWatching = null;
 
-                            return parsed.fullName && parsed.Description;
-                        } else {
-                            return true;
-                        }
-                    },
-                    transform(content, path) {
-                        if (path.match(/\/_locales\/.+/)) {
-                            const parsed = JSON.parse(content.toString());
-                            if (env.browser.toLowerCase() === "safari") {
-                                parsed.fullName.message = parsed.fullName.message.match(/^.+(?= -)/)?.[0] || parsed.fullName.message;
-                                if (parsed.fullName.message.length > 50) {
-                                    parsed.fullName.message = parsed.fullName.message.slice(0, 47) + "...";
+        /**
+         * 
+         * @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'
+                }
+            ]
+        },
+        resolve: {
+            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
+            new CopyPlugin({
+                patterns: [
+                    {
+                        from: '.',
+                        to: '../',
+                        globOptions: {
+                        ignore: ['manifest.json'],
+                        },
+                        context: './public',
+                        filter: async (path) => {
+                            if (path.match(/\/_locales\/.+/)) {
+                                if (env.browser.toLowerCase() === "edge" 
+                                        && !edgeLanguages.includes(path.match(/(?<=\/_locales\/)[^/]+(?=\/[^/]+$)/)[0])) {
+                                    return false;
                                 }
 
-                                parsed.Description.message = parsed.Description.message.match(/^.+(?=\. )/)?.[0] || parsed.Description.message;
-                                if (parsed.Description.message.length > 80) {
-                                    parsed.Description.message = parsed.Description.message.slice(0, 77) + "...";
+                                const data = await fs.promises.readFile(path);
+                                const parsed = JSON.parse(data.toString());
+
+                                return parsed.fullName && parsed.Description;
+                            } else {
+                                return true;
+                            }
+                        },
+                        transform(content, path) {
+                            if (path.match(/\/_locales\/.+/)) {
+                                const parsed = JSON.parse(content.toString());
+                                if (env.browser.toLowerCase() === "safari") {
+                                    parsed.fullName.message = parsed.fullName.message.match(/^.+(?= -)/)?.[0] || parsed.fullName.message;
+                                    if (parsed.fullName.message.length > 50) {
+                                        parsed.fullName.message = parsed.fullName.message.slice(0, 47) + "...";
+                                    }
+
+                                    parsed.Description.message = parsed.Description.message.match(/^.+(?=\. )/)?.[0] || parsed.Description.message;
+                                    if (parsed.Description.message.length > 80) {
+                                        parsed.Description.message = parsed.Description.message.slice(0, 77) + "...";
+                                    }
                                 }
+                
+                                return Buffer.from(JSON.stringify(parsed));
                             }
-            
-                            return Buffer.from(JSON.stringify(parsed));
-                        }
 
-                        return content;
+                            return content;
+                        }
                     }
-                }
-            ]
-        }),
-        new BuildManifest({
-            browser: env.browser,
-            pretty: env.mode === "production",
-            stream: env.stream
-        }),
-        new configDiffPlugin()
-    ]
-});
+                ]
+            }),
+            new BuildManifest({
+                browser: env.browser,
+                pretty: env.mode === "production",
+                stream: env.stream
+            }),
+            new configDiffPlugin()
+        ]
+    };
+};
\ No newline at end of file